Div с динамической минимальной высотой, основанной на высоте окна браузера

У меня есть три элемента div: один как заголовок, один как нижний колонтитул и содержимое центра div.
в центре div в центре нужно автоматически расширять содержимое, но мне бы хотелось, чтобы min-height, что нижний div всегда, по крайней мере, доходит до нижней части окна, но не фиксируется там дольше страницы.

Например:

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>

ОТВЕТЫ

Ответ 1

Просто найдите мое решение на jsfiddle, оно основано на csslayout

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}
<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>

Ответ 2

Я нашел эту любезность ryanfait.com. Это действительно замечательно просто.

Чтобы плавать нижний колонтитул в нижней части страницы, когда содержимое короче высоты окна или внизу содержимого, когда оно длиннее высоты окна, используйте следующий код:

Основная структура HTML:

<div id="content">
  Place your content here.
  <div id="push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

Примечание. Ничто не должно располагаться за пределами разделов '#content' и '#footer', если оно не будет абсолютно позиционировано.
 Примечание: ничто не должно располагаться внутри div '#push', поскольку оно будет скрыто.

И CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #push on longer pages*/
}
#footer, #push {
  height: 4em;
}

Чтобы верхние или нижние колонтитулы охватывали ширину страницы, вы должны абсолютно поместить заголовок.

Примечание. Если вы добавляете заголовок ширины страницы, я счел необходимым добавить дополнительный обертку div в #content. Внешний div управляет горизонтальным интервалом, в то время как внутренний div управляет вертикальным интервалом. Я должен был сделать это, потому что обнаружил, что "min-height:" работает только с телом элемента и добавляет отступы к высоте.

* Изменить: отсутствует точка с запятой

Ответ 3

Если #top и #bottom имеют фиксированные высоты, вы можете использовать:

#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}

Обновление

Если вы хотите #central растягиваться, вы можете:

  • Подделка с фоном на родительском;
  • Использовать CSS3 (скорее всего, не поддерживается) calc();
  • Или, может быть, использовать javascript для динамического добавления min-height.

С calc():

#central {
    min-height: calc(100% - 300px);
}

С jQuery это может быть что-то вроде:

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});

Ответ 4

Нет необходимости взломать или js. Просто примените следующее правило к вашему корневому элементу:

min-height: 100%;
height: auto;

Он автоматически выберет большую из них как высоту, а это означает, что если контент длиннее браузера, это будет высота содержимого, в противном случае - высота браузера. Это стандартный css.

Ответ 5

Как уже упоминалось, функция CSS calc() может работать здесь хорошо. В настоящее время она в основном поддерживается. Вы можете использовать как:

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}

Ответ 6

Вам удобно писать JavaScript, потому что нет возможности оценить высоту всех пользователей этой страницы.

Ответ 7

Это трудно сделать.

Существует стиль min-height: css, но он не работает во всех браузерах. Вы можете использовать его, но самая большая проблема заключается в том, что вам нужно будет установить его примерно на 90% или такие цифры (проценты), но верхние и нижние разделы используют фиксированные размеры пикселей, и вы не сможете смириться их.

 var minHeight = $(window).height() -
                 $('#a').outerHeight(true) -
                 $('#c').outerHeight(true));

if($('#b').height() < minHeight) $('#b').height(minHeight);

Я знаю, что a и c имеют фиксированные высоты, но я скорее их измеряю в случае их изменения позже.

Кроме того, я измеряю высоту b (в конце концов, я не хочу делать меньше), но если есть изображение, которое не загружается, высота может меняться, поэтому следите за вещами как это.

Это может быть безопаснее:

$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;">&nbsp;</div>');

Это просто добавляет элемент в этот div с правильной высотой - это эффективно действует как минимальная высота даже для браузеров, у которых его нет. (Вы можете добавить элемент в свою разметку, а затем просто контролировать высоту его с помощью javascript, а не добавлять его таким образом, чтобы вы могли учитывать его при разработке макета.)