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

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

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

Элемент #container на этой странице имеет минимальную высоту 100%. Таким образом, если содержимое требует большей высоты, чем предоставляет область просмотра, высота #content заставляет #container также становиться длиннее. Возможные столбцы в #container можно затем визуализировать с помощью фонового изображения на #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;
}

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

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

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-модулей. Он основан на этом решении, в котором вместо этого используется гибкость.

* {
    /* 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 выглядит неплохо. другим способом было бы сочетание липкого нижнего колонтитула и min-height hack.

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

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

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

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

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

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

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

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

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

И CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

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

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

Элемент div под блоком содержимого должен иметь clear:both.

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

Этот небольшой фрагмент 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; }

Вы можете попробовать следующее: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Это 100% высота и горизонтальный центр.

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

#content{
        height: auto;
        min-height:350px;
}

Как упоминалось в ответе Афшина Мехрабани, вы должны установить высоту тела и 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);
}

Как указано в свойстве высоты в документах MDN, это не передается по наследству. Значит, вам нужно установить его на 100%. Как известно, любая веб-страница начинается с html, а затем body в качестве дочернего элемента, вам необходимо установить heigth: 100% в обоих из них.

html,
   body {
     height: 100%;
   }

<html>
  <body>

  </body>
</html>

И любой дочерний элемент, отмеченный высотой 100%, будет частью 100 высоты родительского элемента. В приведенном выше примере стиля мы установили для тега html значение 100%, это будет полная высота доступной высоты экрана. Тогда тело будет на 100%, и поэтому оно также будет полной высотой, поскольку его родительский элемент - это html.