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

Я использую следующий вариант: CSS макет - 100% высота

Мин-высота

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

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

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

Подкладка-дно

Так как он больше не находится в нормальном потоке, обивка-дно #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;
}

Для меня это прекрасно работает.

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

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>

Вот еще одно решение, основанное на 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

ответ kleolb02 выглядит довольно хорошо. другим способом было бы сочетание липкого нижнего колонтитула и Хака минимальной высоты

Чистое решение 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>

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

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

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

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

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