100% минимальная высота CSS макета

164

Каков наилучший способ сделать элемент с минимальной высотой 100% в широком диапазоне браузеров?

В частности, если у вас есть макет с headerи footerфиксированной height,

как сделать так, чтобы средняя часть содержимого заполняла 100%пространство между footerфиксированными снизу?

Крис Портер
источник
24
Вы могли бы рассмотреть min-height: 100vh;. Это устанавливает высоту , равную или больше по размеру экрана, vh: vertical height. Для получения дополнительной информации: w3schools.com/cssref/css_units.asp .
Станислав
2
Подобно тому , как разъяснение, vhозначает , viewport heightи поэтому вы можете также использовать vwдля viewport widthи vminдля какой размер является наименьшим, viewport minimum.
iopener
1
Это решение даст нежелательные результаты на Chrome для Android (придется проверить в других мобильных браузерах, таких как Safari), потому что 100vh не будет совпадать со 100%. Фактически высота 100% соответствует высоте экрана минус адресная строка в верхней части экрана, а 100vh соответствует высоте экрана без адресной строки. Таким образом, использование 100vh не будет работать на Chrome для Android. Нижний колонтитул будет ниже сгиба на высоту, соответствующую высоте адресной строки браузера.
sboisse
Вы можете достичь этого с Flexbox. Смотрите пример .
Реджи
1
Теперь дни «100vh» работает как шарм
Awais

Ответы:

114

Я использую следующее: CSS Layout - 100% высота

Минимальная высота

Элемент #container этой страницы имеет минимальную высоту 100%. Таким образом, если контент требует больше высоты, чем обеспечивает область просмотра, высота #content заставляет #container также увеличиваться. Затем возможные столбцы в #content можно визуализировать с помощью фонового изображения на #container; div не являются ячейками таблицы, и вам не нужны (или не нужны) физические элементы для создания такого визуального эффекта. Если вы еще не убеждены; думать о шатких линиях и градиентах вместо прямых линий и простых цветовых схем.

Относительное позиционирование

Поскольку #container имеет относительную позицию, #footer всегда будет оставаться внизу; поскольку упомянутая выше минимальная высота не препятствует масштабированию #container, это будет работать, даже если (или, скорее, особенно когда) #content заставляет #container становиться длиннее.

Перетяжка дно

Так как он больше не находится в нормальном потоке, padding-bottom элемента #content теперь предоставляет пространство для абсолютного #footer. Этот отступ включен в высоту прокрутки по умолчанию, так что нижний колонтитул никогда не будет перекрывать вышеуказанное содержимое.

Немного измените размер текста или измените размер окна браузера, чтобы протестировать этот макет.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

У меня отлично работает.

ollifant
источник
В этом примере в IE7 пытались увеличить размер шрифта (Ctrl + "+"), и этот разрушенный липкий нижний колонтитул :(
Виталий
этот, кажется, не работает в IE9 ... он работает в других IE?
Уильям Ниу
30

Чтобы установить произвольную высоту, заблокированную где-то:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}
<div id="outerbox">
  <div id="innerbox"></div>
</div>

Крис
источник
23

Вот еще одно решение, основанное vhили viewpoint height, для деталей, посещение блоков CSS . Он основан на этом решении , которое вместо этого использует flex.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}
<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Единицами измерения являются vw, vh, vmax, vmin. По сути, каждая единица равна 1% от размера области просмотра. Таким образом, при изменении области просмотра браузер вычисляет это значение и корректирует его соответствующим образом.

Вы можете найти больше информации здесь:

В частности:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest
Станислав
источник
6

Чтобы min-heightправильно работать с процентами, при этом наследуя родительский узел min-height, нужно было бы установить высоту родительского узла, 1pxи тогда дочерний узел min-heightбудет работать правильно.

Демо-страница

VSync
источник
Хорошо, НО, если содержимое div в демо имеет большую высоту, чем окно браузера, фон будет обрезан после прокрутки вниз
fider
@fider - предоставьте игровую площадку с указанием упомянутой вами проблемы.
vsync
jsbin.com/nixuf/1/edit прокрутите вниз. Я нашел полезную информацию в этом посте ниже
fider
6

Чистое CSSрешение ( #content { min-height: 100%; }) будет работать во многих случаях, но не во всех, особенно в IE6 и IE7.

К сожалению, вам нужно прибегнуть к решению JavaScript, чтобы получить желаемое поведение. Это можно сделать, рассчитав нужную высоту для вашего контента <div>и установив ее как свойство CSS в функции:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Вы можете установить эту функцию в качестве обработчика onLoadи onResizeсобытий:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>
Левик
источник
3

Я согласен с Levik, так как родительский контейнер установлен на 100%, если у вас есть боковые панели, и вы хотите, чтобы они заполняли пространство для соответствия нижнему колонтитулу, вы не можете установить их на 100%, потому что они также будут на 100 процентов выше родительской высоты, что означает, что нижний колонтитул в конечном итоге становится нажатием при использовании функции очистки.

Подумайте об этом так, если ваш заголовок имеет высоту 50px, а нижний колонтитул имеет высоту 50px, а содержимое просто встраивается в оставшееся пространство, например, 100px, а контейнер страницы составляет 100% от этого значения, его высота будет 200px. Затем, когда вы устанавливаете высоту боковой панели на 100%, она составляет 200 пикселей, хотя она должна плотно прилегать между верхним и нижним колонтитулом. Вместо этого получается 50px + 200px + 50px, поэтому страница теперь имеет 300px, потому что боковые панели установлены на ту же высоту, что и контейнер страницы. Там будет большой пробел в содержании страницы.

Я использую Internet Explorer 9, и это то, что я получаю в качестве эффекта при использовании этого метода 100%. Я не пробовал это в других браузерах, и я предполагаю, что это может работать в некоторых других вариантах. но это не будет универсальным.

Clint
источник
3

Сначала вы должны создать divс id='footer'после вашего contentdiv, а затем просто сделать это.

Ваш HTML должен выглядеть так:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

И CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}
Афшин Мехрабани
источник
2

Попробуй это:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divЭлемент ниже DIV контента должен иметь clear:both.

MilanBSD
источник
2

Вероятно, самое короткое решение (работает только в современных браузерах)

Этот маленький кусочек CSS делает "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

единственное требование - иметь нижний колонтитул фиксированной высоты.

Например, для этого макета:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

вам нужен этот CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }
Константин Смолянин
источник
0

просто поделись тем, что я использовал, и прекрасно работает

#content{
        height: auto;
        min-height:350px;
}
Юда Правира
источник
0

Как упоминалось в ответе Афшина Мехрабани, вы должны установить высоту body и html на 100%, но чтобы получить нижний колонтитул, рассчитайте высоту оболочки:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}
Fanky
источник