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

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

Ответ 1

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

Мин высота

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

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

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

Набивка дно

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

Прекрасно работает для меня.

Ответ 2

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

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>

Ответ 3

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

Ответ 4

kleolb02 ответ выглядит довольно хорошо. Другим способом было бы сочетание липкого нижнего колонтитула и min-height hack

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

Сначала вы должны создать 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;        
}

Ответ 9

Попробуйте следующее:

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

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

Ответ 10

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

Эта небольшая часть 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; }

Ответ 11

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

Ответ 12

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

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

Ответ 13

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

Ответ 14

Сначала вы должны создать div с id = 'ftr' после div, а затем:

<html>
 <body>
     <div id="content">
          content
     </div>
        <div id="ftr"></div>
    </body>
</html>

CSS:

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