Ответы:
Уловка заключается в указании 100% высоты для элементов html и body. Некоторые браузеры обращаются к родительским элементам (html, body) для вычисления высоты.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}Забудь все ответы, эта строка CSS сработала у меня за 2 секунды:
height:100vh;1vh = 1% от высоты экрана браузера
Для гибкого масштабирования макета вы можете использовать:
min-height: 100vh[обновление ноябрь 2018] Как упоминалось в комментариях, использование min-height может избежать проблем с отзывчивыми проектами
[обновление апрель 2018] Как упоминалось в комментариях, еще в 2011 году, когда был задан вопрос, не все браузеры поддерживали единицы просмотра. Другие ответы были решениями тогда - они vmaxвсе еще не поддерживаются в IE, поэтому это может быть не лучшим решением для всех.
min-height: 100vhбыло бы намного лучше. Он также будет масштабироваться для адаптивного дизайна.
На самом деле лучший подход таков:
html {
height:100%;
}
body {
min-height:100%;
}Это решает все для меня и помогает мне контролировать нижний колонтитул, и он может иметь фиксированный нижний колонтитул независимо от того, прокручивается ли страница вниз.
Техническое решение - EDITED
Исторически сложилось так, что «высота» сложна для лепки, по сравнению с «шириной», которая проще всего. Поскольку css сосредотачивается на том, <body>чтобы стили работали. Код выше - мы дали <html>и <body>высоту. Здесь проявляется магия - поскольку у нас есть min-height на игровом столе, мы сообщаем браузеру, что <body>он лучше, <html>потому что он <body>содержит min-height. Это, в свою очередь, позволяет <body>переопределить, <html>потому <html>что высота уже была ранее. Другими словами, мы обманываем браузер, чтобы он «выскочил» <html>из таблицы, чтобы мы могли стилизовать самостоятельно.
min-heightи height?
<body>чтобы стили работали. Этот код: мы дали <html>и <body>высоту. Именно здесь проявляется магия - поскольку у нас есть min-height на игровом столе, мы сообщаем серверу, что <body>он превосходит, <html>потому что <body>содержит min-height. Это, в свою очередь, позволяет <body>переопределить, <html>потому <html>что высота уже была ранее. Другими словами, мы обманом заставляем сервер « <html>оттолкнуться » от стола, чтобы мы могли стилизовать самостоятельно.
Вы можете использовать vh в свойстве min-height.
min-height: 100vh;Вы можете сделать следующее, в зависимости от того, как вы используете поля ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementПринятое решение фактически не сработает. Вы заметите, что содержимое divбудет равно высоте его родительского элемента body. Таким образом, установка bodyвысоты 100%установит ее равной высоте окна браузера. Допустим, окно браузера было 768pxпо высоте, установив divвысоту содержимого 100%, divвысота, в свою очередь, будет 768px. Таким образом, вы получите div заголовка 150pxи div содержимого 768px. В конце концов у вас будет контент 150pxпод нижней частью страницы. Для другого решения проверьте эту ссылку.
С HTML5 вы можете сделать это:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML:
<header>blabablalba </header>
<section> Content </section>Для меня хорошо сработало следующее:
Я обернул заголовок и содержимое в div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>Я использовал эту ссылку, чтобы заполнить высоту с помощью flexbox. CSS выглядит так:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Для получения дополнительной информации о технике flexbox посетите ссылку
Вы также можете установить для родителя значение display: inline. См. Http://codepen.io/tommymarshall/pen/cECyH
Убедитесь, что высота html и body также установлена на 100%.
Принятый ответ не работает. И ответ, получивший наибольшее количество голосов, не отвечает на вопрос. С заголовком с фиксированной высотой в пикселях, заполнителем на оставшейся части экрана браузера и прокруткой для owerflow. Вот решение, которое действительно работает с использованием абсолютного позиционирования. Я также предполагаю, что высота заголовка известна по звуку «фиксированный заголовок» в вопросе. В качестве примера я использую 150 пикселей:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS: (добавление фона только для визуального эффекта)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}Для более подробного ознакомления с тем, как это работает, с фактическим содержимым внутри #Content, взгляните на этот jsfiddle , используя строки и столбцы начальной загрузки.
bottomпозаботилась о том, чтобы они #Contentоставались в конце страницы. Спасибо, что нашли время объяснить это.
В этом случае я хочу, чтобы мой основной блок содержимого был жидкой высотой, чтобы вся страница занимала 100% высоты браузера.
height: 100vh;
Пожалуйста, позвольте мне добавить сюда свои 5 центов и предложить классическое решение:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Это будет работать во всех браузерах, без скриптов и без гибкости. Откройте сниппет в полноэкранном режиме и измените размер браузера: желаемые пропорции сохраняются даже в полноэкранном режиме.
idHeader.heightи idContent.topкорректируются, чтобы включать границу, и должны иметь то же значение, если граница не используется. В противном случае элементы будут вытягиваться из области просмотра, поскольку рассчитанная ширина не включает границу, поля и / или отступы.left:0; right:0;может быть заменен на width:100%по той же причине, если граница не используется.padding-topи / или
padding-bottomатрибуты к #idOuterэлементу.Чтобы завершить свой ответ, вот макет нижнего колонтитула:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>А вот макет с верхним и нижним колонтитулами:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Если вам не нужна поддержка IE 9 и ниже, я бы использовал flexbox.
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }Также нужно, чтобы тело занимало всю страницу
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS Frames, версия 2: Пример 2, указанная ширина | 456 Berea Street
Важно то, что, хотя это звучит просто, в ваш CSS-файл будет добавлено довольно много уродливого кода, чтобы получить такой эффект. К сожалению, это действительно единственный вариант.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}Лучшее решение, которое я нашел до сих пор, - установить элемент нижнего колонтитула внизу страницы, а затем оценить разницу смещения нижнего колонтитула и элемента, который нам нужно расширить. например
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Вы также можете обновить высоту элемента содержимого при каждом изменении размера окна, поэтому ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Вы пробовали что-то подобное?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>