Сделайте div, чтобы заполнить высоту оставшегося места на экране
Я работаю над веб-приложением, в котором я хочу, чтобы содержимое занимало высоту всего экрана.
На странице есть заголовок, содержащий логотип и информацию об учетной записи. Это может быть произвольная высота. Я хочу, чтобы div с содержимым заполнил остальную часть страницы до самого низа.
У меня есть заголовок div и контент div. На данный момент я использую такую таблицу для раскладки:
CSS и HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id = "page">
<tr>
<td id = "tdheader">
<div id = "header">...</div>
</td>
</tr>
<tr>
<td id = "tdcontent">
<div id = "content">...</div>
</td>
</tr>
</table>Страница заполнена по всей высоте, прокрутка не требуется.
Для всего, что находится внутри блока содержимого, установка top: 0; поместит его прямо под заголовок. Иногда содержимое представляет собой настоящую таблицу со 100% высотой. Помещение header внутрь content не позволит этому сработать.
Есть ли способ добиться такого же эффекта без использования table?
Обновлять:
Элементы внутри содержимого div также будут иметь высоту в процентах. Так что что-то на 100% внутри div заполнит его до самого дна. Как и два элемента на 50%.
Обновление 2:
Например, если заголовок занимает 20% высоты экрана, таблица, указанная на 50% внутри #content, займет 40% пространства экрана. Пока что просто обернуть все это в таблицу - это единственное, что работает.
Я пытался заново создать вашу настройку - jsfiddle.net/ceELs - но она не работает, что я пропустил?
@Мистер. Ответ инопланетянина прост и полезен, проверьте его http://stackoverflow.com/a/23323175/188784
На самом деле то, что вы описываете, не работает даже с таблицами: если содержимое занимает больше места по вертикали, чем высота экрана, ячейка таблицы и вся таблица будут расширяться за пределы нижней части экрана. Ваш контент переполнен: авто не будет отображать полосу прокрутки.
@GillBates он будет работать после того, как вы укажете высоту родительского элемента, посмотрите на jsfiddle.net/ceELs/5
Появляется .screenful: {height: 100vh}, добавьте box-sizing: border-box;, чтобы включить заполнение.
Поэтому люди не упускают из виду очевидное: если вам нужно заполнить оставшуюся страницу только некоторыми свойствами css (например, background-color), то вы можете установить этот css в элементе body.
Javascript полностью :-) Легко рассчитать высоту, используя getClientBoundingRect нижнего и верхнего колонтитула. А затем просто динамически установите высоту div ... я знаю, что отвечать так на этот вопрос нереально (следовательно, только комментарий :-))
Ответы 36
Если единственная проблема - высота, кажется, работает просто использование div:
<div id = "header">header content</div>
<div id = "content" style = "height:100%">content content</div>
В простом тесте ширина заголовка / содержимого отличается в вашем и моем примере, но я не уверен, из вашего сообщения, если вас беспокоит ширина?
Это не совсем то, чем я хочу заниматься. Я хочу, чтобы содержимое div заполняло оставшуюся часть экрана, а не было фактически той же высоты, что и экран.
Это похоже на то, что делает мой пример, по крайней мере, когда я его пробую. Вы не замечаете такого поведения?
Попробуйте поместить таблицу в контент размером 100%. Он не будет работать.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type = "text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id = "content">
<div id = "header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Во всех нормальных браузерах вы можете поместить div «заголовок» перед содержимым в качестве родственного элемента, и тот же CSS будет работать. Однако IE7- неправильно интерпретирует высоту, если в этом случае значение float равно 100%, поэтому заголовок должен находиться В содержимом, как указано выше. Переполнение: auto вызовет двойные полосы прокрутки в IE (в котором полоса прокрутки области просмотра всегда отображается, но отключена), но без нее содержимое будет обрезано, если оно переполнится.
Закрывать! Почти то, что я хочу, за исключением того, что я собираюсь разместить другие вещи в div ... то есть top: 0; поместит что-то прямо под заголовком. Я изменю свой вопрос еще раз, потому что вы ответили на него отлично, и все же не то, что я хочу! Я просто скрою переполнение, так как контент должен соответствовать.
-1: этот ответ создает div с именем content, который покрывает весь экран, а не отдых экрана.
На самом деле нет надежного кросс-браузерного способа сделать это в CSS. Предполагая, что ваш макет сложен, вам нужно использовать JavaScript, чтобы установить высоту элемента. Суть того, что вам нужно сделать, такова:
Element Height = Viewport height - element.offset.top - desired bottom margin
Как только вы сможете получить это значение и установить высоту элемента, вам нужно прикрепить обработчики событий как к загрузке окна, так и к onresize, чтобы вы могли запустить свою функцию изменения размера.
Кроме того, предполагая, что ваш контент может быть больше, чем область просмотра, вам нужно будет установить overflow-y для прокрутки.
Вот что я подозревал. Однако приложение также будет работать с отключенным Javascript, поэтому я думаю, что буду продолжать использовать таблицу.
Винсент, способ стоять на своем. Я хотел сделать то же самое, но с css это невозможно? Я не уверен, но, несмотря на то, что ни одно из других решений не делает то, что вы описали. На данный момент правильно работает только javascript.
что, если высота окна изменится
@Techsin использует jquery или ему подобные для привязки к событию изменения размера окна: $ (window) .bind ('resize directionchange', doResize);
Я имею в виду ... почему мы не используем calc в 2013 году?
Проблема с onresize в том, что он не работает. Он не улавливает изменение размера внутреннего содержимого дерева DOM, см. stackoverflow.com/q/5532453.
@TMS Почему бы не добавить прослушивателей событий к содержимому, размер которого изменяется?
@Algorath, какое событие ты имеешь в виду? Проблема в том, что на самом деле нет такого события, которое запускалось бы при изменении DOM, см. Связанный вопрос stackoverflow.com/q/5532453
У меня такая же проблема, по-прежнему нет лучшего способа?
Разве это не надежное кроссбраузерное решение: stackoverflow.com/questions/18665171/…
@MarkMurphy Это зависит от обстоятельств. Посетители вашего веб-сайта все еще используют IE 6/7 или они обновились?
Было бы неплохо, если бы вы преобразовали свое описание как код
высота: calc (100vh - 400px); - допустимый стиль CSS, который делает именно то, о чем идет речь. Все другие решения полагаются на фиксированную родительскую высоту или отображение блока.
@WilliamX это лучший ответ на этой странице. Вы должны добавить это как ответ
Винсент, я отвечу еще раз, используя ваши новые требования. Поскольку вы не заботитесь о том, чтобы контент был скрыт, если он слишком длинный, вам не нужно перемещать заголовок. Просто поместите переполнение, скрытое в теги html и body, и установите высоту #content на 100%. Контент всегда будет длиннее области просмотра на высоту заголовка, но он будет скрыт и не будет вызывать полосы прокрутки.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type = "text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id = "header">
Header
<p>Header stuff</p>
</div>
<div id = "content">
Content
<p>Content stuff</p>
<div id = "positioned">Positioned Content</div>
</div>
</body>
</html>
Уже думал об этом. Но тоже не работает. Я просто остановлюсь на table, потому что он работает. Тем не менее, спасибо за обновление.
Я тоже искал ответ на этот вопрос. Если вам посчастливилось настроить таргетинг на IE8 и выше, вы можете использовать display:table и связанные значения, чтобы получить правила отрисовки таблиц с элементами уровня блока, включая div.
Если вам еще повезло и ваши пользователи используют браузеры высшего уровня (например, если это приложение для интрасети на компьютерах, которыми вы управляете, как мой последний проект), вы можете использовать новый Гибкая компоновка коробки в CSS3!
Некоторое время я боролся с этим и в итоге получил следующее:
Поскольку легко сделать содержимое DIV той же высоты, что и родительский, но, очевидно, сложно сделать его родительской высотой за вычетом высоты заголовка, я решил сделать содержимое div полной высоты, но расположить его абсолютно в верхнем левом углу, а затем определить отступ для вершины, имеющей высоту заголовка. Таким образом, контент аккуратно отображается под заголовком и заполняет все оставшееся пространство:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Что делать, если вы не знаете высоту заголовка?
это никогда не работал у меня иначе с использованием JavaScript, как предложил NICCAI в самом первом ответе. Я использую этот подход для изменения масштаба <div> с помощью Google Maps.
Вот полный пример того, как это сделать (работает в Safari / FireFox / IE / iPhone / Andorid (работает с вращением)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class = "header" id = "headerId">Hello</div>
<div class = "content" id = "contentId"></div>
</body>
Что сработало для меня (с div внутри другого div, и я предполагаю во всех других обстоятельствах), так это установить нижнее заполнение на 100%. То есть добавьте это в свою таблицу стилей / CSS:
padding-bottom: 100%;
100% чего? Если я попробую это сделать, у меня появится огромное пустое пространство, и начнется прокрутка.
100% размера области просмотра может быть @mlibby. Если вы также установите высоту html и body на 100%, тогда div может перейти на 100%. При наличии только одного div 100% будут относиться к содержимому div. Я не пробовал с вложенным div.
Это означает 100% высоты элемента (добавляется в качестве заполнения элемента), что увеличивает его высоту вдвое. Нет уверенности, что он заполнит страницу, и определенно не ответ на вопрос. Как уже было сказано, он может заполнить больше, чем область просмотра.
padding-bottom: 100% устанавливает высоту + 100% родительского контейнера ширина
from w3school: Задает отступ внизу в процентах от ширины элемента. w3schools.com/cssref/pr_padding-bottom.asp
это не решение плохая идея, братан.
Оригинальный пост более 3-х лет назад. Думаю, многие люди, которые приходят к этому посту, как и я, ищут решение макета, похожее на приложение, например, фиксированный заголовок, нижний колонтитул и полноразмерный контент, занимающий остальной экран. Если да, то этот пост может помочь, он работает в IE7 + и т. д.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
А вот несколько отрывков из этого поста:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class = "header row" style = "background:yellow;">
<h2>My header</h2>
</div>
<div class = "body row scroll-y" style = "background:lightblue;">
<p>The body</p>
</div>
<div class = "footer row" style = "background:#e9e9e9;">
My footer
</div>Есть только одна проблема: размер верхнего и нижнего колонтитулов не устанавливается автоматически. Который - это настоящая трудность, а который - почему ответ «это невозможно» в настоящее время находится наверху ...
Мне нужен заголовок размером 55 пикселей и блок div, который заполняет остальную часть высоты документа. это решение!
Вы бомба, я так долго пробовал это, и это единственное решение, которое я нашел. Мне нужно было, чтобы мой элемент навигации был высотой 60 пикселей вверху, а остальная часть охватывала 100%, это решило проблему.
Это работает хорошо, за исключением того, что у меня небольшая проблема - если я помещаю элемент с display: table в корпус, кажется, что он переполняет корпус. Таким образом, height: 100% не дает правильной высоты.
.col не используется?
Это решение не полностью реагирует. Если у вас есть навигация со значком переключателя меню в заголовке, который раскрывает меню, содержимое меню будет скрыто и перекрыто основным содержимым: s
Почему не так?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Дать вам высоту html и body (в этом порядке), а затем просто задать высоту вашим элементам?
Работает на меня
Дело в том, что если пользователь использует большой экран для просмотра этой страницы, а высота вашего заголовка фиксирована ровно 100 пикселей, что меньше 40% от текущей высоты, между вашим заголовком и контекстом тела будет большой пробел.
Я нашел довольно простое решение, потому что для меня это была проблема дизайна. Я хотел, чтобы остальная часть страницы не была белой под красным колонтитулом. Поэтому я установил красный цвет фона страниц. Цвет фона содержимого станет белым. Если высота содержимого установлена, например. 20em или 50% почти пустая страница не оставит всю страницу красной.
Попробуй это
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Если вы можете справиться с отсутствием поддержки старых браузеров (то есть MSIE 9 или старше), вы можете сделать это с помощью Модуль гибкой компоновки коробки, который уже является W3C CR. Этот модуль также позволяет использовать другие полезные трюки, такие как изменение порядка содержимого.
К сожалению, MSIE 9 или ниже не поддерживает это, и вы должны использовать префикс поставщика для свойства CSS для всех браузеров, кроме Firefox. Надеюсь, что другие поставщики тоже скоро откажутся от префикса.
Другой вариант - Макет сетки CSS, но он имеет еще меньшую поддержку в стабильных версиях браузеров. На практике это поддерживает только MSIE 10.
Обновить год 2020: все современные браузеры поддерживают как display: flex, так и display: grid. Единственное, чего не хватает, - это поддержка subgrid, которая поддерживается только Firefox. Обратите внимание, что MSIE не поддерживает ни то, ни другое в спецификации, но если вы хотите добавить специальные хаки CSS для MSIE, его можно заставить работать. Я бы посоветовал просто игнорировать MSIE, потому что даже Microsoft говорит, что его больше не следует использовать. Microsoft Edge отлично поддерживает эти функции.
Вместо использования таблиц в разметке вы можете использовать таблицы CSS.
Разметка
<body>
<div>hello </div>
<div>there</div>
</body>
(Соответствующий) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
FIDDLE1 и FIDDLE2
Некоторые преимущества этого метода:
1) Меньше разметки
2) Разметка более семантическая, чем таблицы, потому что это не табличные данные.
3) Поддержка браузером отлично: IE8 +, все современные браузеры и мобильные устройства (могу ли я использовать)
Just for completeness, here are the equivalent Html elements to css properties for the Модель таблицы CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
меня просто указали на техника таблиц css. Оказывается, ответ уже был в этом вопросе. Это лучшее решение в; чистый, элегантный и с использованием именно того инструмента, в котором он был предназначен. Таблицы CSS
Код скрипки здесь не совсем соответствует ответу. Добавление html, body { height: 100%, width: 100% } показалось мне критически важным в моих тестах.
Раздражающие функции таблиц CSS точно такие же, как и у обычных таблиц: если содержимое слишком велико, они расширяют ячейку до нужного размера. Это означает, что вам все равно может потребоваться ограничить размер (max-height) или установить высоту из кода, если страница динамическая. Я очень скучаю по сеткам Silverlight! :(
Вы всегда можете добавить абсолютно позиционированный контейнер внутри элемента строки таблицы, а затем установить его ширину и высоту на 100%. Не забудьте также установить относительную позицию в элементе table-row.
@MikeMellor не работает в IE11, хотя, поскольку он, кажется, игнорирует позиционирование relative на элементе table-row, принимает высоту первого восходящего элемента, который не является элементом таблицы.
более сложное аналогичное решение: stackoverflow.com/questions/21222663/…
Это решение не полностью реагирует: я пробую его с заголовком, который имеет панель навигации, и если вы нажмете значок переключателя меню, поведение будет неожиданным, оно не заставит контент перемещаться вниз вместе с меню.
Фактически вы можете использовать display: table для разделения области на два элемента (заголовок и содержимое), где заголовок может различаться по высоте, а содержимое заполняет оставшееся пространство. Это работает со всей страницей, а также когда область является просто содержимым другого элемента, позиционированного с position, установленным на relative, absolute или fixed. Он будет работать, пока родительский элемент имеет ненулевую высоту.
Посмотри на эту скрипку, а также код ниже:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class = "as-table">
<div id = "header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class = "additional-padding"></div>
</div>
<div class = "as-table-row">
<div id = "content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Хороший ответ, за который я проголосовал, но, к сожалению, он не работает с IE8, который еще будет существовать еще долгое время.
Такие приложения, как Gmail, используют Javascript для изменения размера, что в любом случае является лучшим решением, чем CSS.
Я думаю, они используют Javascript, потому что нет другого хорошего кроссбраузерного решения CSS, а не потому, что оно лучше.
@VincentMcNabb Работает в IE8 w3schools.com/cssref/pr_class_display.asp. Просто требуется объявление! DOCTYPE. Никогда даже не знал о табличном значении для атрибута отображения. Классный раствор. +1
Только CSS подход (если высота известна / фиксирована)
Если вы хотите, чтобы средний элемент занимал всю страницу по вертикали, вы можете использовать calc(), введенный в CSS3.
Предполагая, что у нас есть элементы фиксированная высотаheader и footer, и мы хотим, чтобы тег section занимал всю доступную высоту по вертикали ...
Предполагаемая разметка и ваш CSS должен быть
html,
body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>Итак, здесь я складываю высоту элементов, а затем вычитаю из 100% с помощью функции calc().
Просто убедитесь, что вы используете height: 100%; для родительских элементов.
OP сказал, что заголовок может быть произвольной высоты. Так что, если вы не знаете заранее высоту, вы не сможете использовать calc :(
@Danield Вот почему я упомянул фиксированная высота :)
Это решение, которое сработало для меня, и не потребовало от меня изменения дизайна моих существующих страниц вокруг флексбоксов. Если вы используете LESS, то есть Bootstrap, обязательно прочтите сообщение coderwall о том, как избежать функции calc (), чтобы LESS ее не обрабатывал.
Оп сказал: «Это может быть произвольная высота». Произвольные средства, выбранные дизайнером, фиксированные таким образом. Это решение, безусловно, лучшее.
Обновление 2015 г .: подход flexbox
Есть два других ответа, в которых кратко упоминается Flexbox; однако это было более двух лет назад, и они не приводят никаких примеров. Спецификация для flexbox определенно определена.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
Все основные браузеры и IE11 + поддерживают Flexbox. Для IE 10 и старше вы можете использовать прокладку FlexieJS.
Чтобы проверить текущую поддержку, вы также можете увидеть здесь: http://caniuse.com/#feat=flexbox
Рабочий пример
С помощью flexbox вы можете легко переключаться между любыми строками или столбцами, имеющими фиксированные размеры, размеры содержимого или размеры оставшегося пространства. В моем примере я установил привязку заголовка к его содержимому (в соответствии с вопросом OP), я добавил нижний колонтитул, чтобы показать, как добавить область фиксированной высоты, а затем установил область содержимого, чтобы заполнить оставшееся пространство.
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class = "box">
<div class = "row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class = "row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class = "row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>В приведенном выше CSS свойство сгибать сокращает свойства гибкий рост, гибко-усадочный и гибкая основа, чтобы установить гибкость элементов гибкости. В Mozilla есть хорошее знакомство с моделью гибких ящиков.
Почему атрибут flex: 0 1 30px; в box .row переопределяется в каждом div?
Вот поддержка браузером flexbox - приятно видеть весь этот зеленый цвет - caniuse.com/#feat=flexbox
Ссылка на Flexie.js мертва. Вот проект github github.com/doctyper/flexie
@ ses3ion Я обновил гибкую ссылку, спасибо за указатель!
Определенно это очень хороший подход, и он почти работает;) Есть небольшая проблема, когда содержимое div.content превышает исходную высоту сгибания. В текущей реализации нижний колонтитул будет сдвинут ниже, и разработчики этого не ожидают;) Так что я сделал очень простое исправление. jsfiddle.net/przemcio/xLhLuzf9/3 Я добавил дополнительную гибкость для прокрутки контейнера и переполнения.
@przemcio хороший момент, но я не думаю, что наличие прокручиваемого контента - это то, чего ожидает каждый разработчик;) - вам нужно только добавить overflow-y: auto к .row.content, чтобы достичь того, что вам нужно.
@ bburns.km все зеленое - это хорошо. Даже со всеми возможными префиксами flex часто не работает в старых мобильных браузерах, таких как Android <4.4. Flex - это здорово, но только если вам повезет, и вы не поддерживаете все браузеры.
Возможно ли без 100% высоты на html и body?
не работает в Safari 10! так что помните об использовании этого подхода
@ KubaŠimonovský, вам нужно будет предоставить больше информации, чем "не работает". При загрузке приведенного выше примера в Safari 10 (Mac OS X Yosemite) все работает, как ожидалось (afaics). Однако flexbox - это большая спецификация, поэтому, возможно, что-то не так поддерживается, как другие браузеры.
@Pebbl, хорошо ... У меня yosemite 10.10, но по какой-то причине у меня есть Safari 8 .. Я понятия не имею, как это возможно, потому что я думал, что у меня есть Safari 10 .. так что мои извинения .. В любом случае, у меня были проблемы с flex-direction: column и flex: 1 для дочернего элемента в safari 10. потому что дочерний элемент не заполнил оставшееся пространство родительского элемента.
Могу ли я использовать свойство flex для элемента body? Есть ли причина, почему нет? Почему мы должны использовать flex:1 0 auto; или flex:1 1 auto;, если мы можем просто использовать flex-grow: 1 или flex-grow: 0`?
Кажется, что по большей части работает, но (по крайней мере, в Chrome) высота нижнего колонтитула не меняется независимо от того, что вы установили высоту .row.footer.
@JasonPolites - высота нижнего колонтитула изменится на то, что вы установили, если на нем есть место, если страница заполнена контентом, она рухнет. Если вы хотите, чтобы нижний колонтитул не сворачивался, установите flex-shrink на 0, а не на 1.
@Pebble на самом деле я хочу наоборот. Я хочу, чтобы нижний колонтитул был меньше, даже если содержимое в основном пустое. Например. установка высоты нижнего колонтитула в вышеупомянутом решении на 10 пикселей не делает его 10 пикселей независимо от содержимого
@JasonPolites - я считаю, что вы столкнулись с другой проблемой (не связанной с flexbox). Скорее всего, вы пытаетесь установить нижний колонтитул меньше, чем высота его собственного содержимого. Нижний колонтитул выше содержит теги <p>, которые по умолчанию имеют дополнительные поля, которые определенно выталкивают больше, чем 10px. Если вы удалите поля или теги <p>, вы обнаружите, что можете уменьшить высоту нижнего колонтитула. Чтобы перейти на 10px, вам, возможно, придется уменьшить размер шрифта или высоту строки; или универсальное крепление для элементов обрезки overflow: hidden на вяз .footer.
Смущает ваша точка зрения @ KirbyL.Wallace, display: flex - иначе известный как flexbox - это чистый CSS. Есть еще display: grid, тоже чистый CSS. FlexGrid, однако, представляет собой компонентную систему, которая была построена с использованием flexbox и не имеет ничего общего с приведенным выше ответом.
Ого! Абсолютно прав. Когда это произошло? ха-ха, удалил мой комментарий. Это будет вводить в заблуждение. Спасибо, @Pebbl ...
@Pebbi Просто добавлю морали моей разочаровывающей, но, наконец, успешной истории: ваш ответ не сработает, если вы настроите body как гибкий контейнер. Гибкий контейнер должен быть элементом внутри body.
Я предполагаю, что это может зависеть от браузера, который вы тестировали с помощью @ terminus.technicus (или, возможно, от конкретной подспособности, которая не работает). Но все мои тесты показывают, что использование вышеуказанного для элемента body должно работать нормально. Главное предостережение, которое вам нужно применить - и это просто природа самих элементов html / body - это сначала принудительно установить их на полную высоту с помощью html, body { height: 100%; margin: 0; padding: 0; }. Затем вы можете применить к телу обработку внешней гибкости. Тем не менее, этот ответ уже устарел. В наши дни есть много других типов гибкого / сеточного макета.
Я копирую / вставляю точный код HTML и CSS в stackblitz, но он не получает желаемого поведения. Кто-нибудь знает почему? stackblitz.com/edit/angular-ivy-9xz7r8
Я не работал с angular специально @ Minyc510, но большинство компонентных систем локально используют свои CSS. Это означает, что селекторы, которые пытаются выбрать элементы за пределами области действия компонента, такие как html, body в этом случае, либо игнорируются, либо не применяются должным образом. Я бы посоветовал изучить, как ориентироваться за пределами вашего компонента. Или, что еще лучше, разделите CSS между тем, что влияет на компонент, и тем, что контролирует размер / макет страницы (например, body / html). Затем вы можете применить css страницы на более высоком уровне, не нарушая области видимости.
@ Minyc510 некоторые CSS, примененные к родительским элементам, могут быть причиной отсутствия желаемого поведения, .outer{display:flex}, .takes-avail-space{flex:1 1 auto} всегда работает.
Это может быть сделано только с помощью CSS с использованием vh:
#page {
display:block;
width:100%;
height:95vh !important;
overflow:hidden;
}
#tdcontent {
float:left;
width:100%;
display:block;
}
#content {
float:left;
width:100%;
height:100%;
display:block;
overflow:scroll;
}
и HTML
<div id = "page">
<div id = "tdcontent"></div>
<div id = "content"></div>
</div>
Я проверил, он работает во всех основных браузерах: Chrome, IE и FireFox.
Ничего себе, никогда раньше не слышал об устройствах vh и vw. Более подробная информация: snook.ca/archives/html_and_css/vm-vh-units
К сожалению, это не поддерживает IE8 :(
Я пробовал этот подход, но height: 100% на #content заставил его высоту соответствовать #page, игнорируя высоту #tdcontent в целом. При большом количестве содержимого полоса прокрутки выходит за пределы нижней части страницы.
Ни одно из опубликованных решений не работает, когда вам нужно прокручивать нижний div, когда содержимое слишком высокое. Вот решение, которое работает в этом случае:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<div class = "table container">
<div class = "table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class = "table-row body">
<div class = "table-cell body-content-outer-wrapper">
<div class = "body-content-inner-wrapper">
<div class = "body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>Первоисточник: Заполнение оставшейся высоты контейнера при обработке переполнения в CSS
Предварительный просмотр JSFiddle в реальном времени
Спасибо!!! Я попробовал все ответы, не относящиеся к таблицам и Flexbox, и это единственный ответ, который работал на 100% правильно. Один вопрос: в исходном коде есть только body-content-wrapper, и, похоже, все работает нормально без двойной оболочки (без каких-либо table-cell). Есть ли в этом проблема?
@BrandonMintern Если у вас нет ячеек таблиц, это не работает в IE8 и IE9. (См. Комментарий в исходной статье.)
Да, ячейки также требуются в IE10. К сожалению, в IE10 и ниже высота .body оказывается такой же, как и в .container. Вертикальная полоса прокрутки по-прежнему находится на своем месте, но .container в конечном итоге растягивается больше, чем мы хотели. В полноэкранном режиме нижняя часть .body выходит за пределы нижней части экрана.
Спасибо, @JohnKurlak. Это единственное решение, которое сработало в моей ситуации (способ flexbox был заблокирован ошибочным поведением в конкретной версии Chrome, используемой моим клиентом)
Святой ****! Я так долго искал этот ответ! Большое спасибо. Flexbox здесь не работал, но ячейки таблиц действительно работали. Удивительный.
Простое решение с использованием flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class = "content"></div>
</body>Альтернативное решение, с центром в div содержимого
Это, безусловно, лучший ответ. Работает как шарм для домашних страниц hero-img или как комбинация hero-img с вашей навигационной панелью
CSS3 простой способ
height: calc(100% - 10px); // 10px is height of your first div...
все основные браузеры в наши дни поддерживают его, так что продолжайте, если у вас нет необходимости поддерживать старые браузеры.
Это не сработает, если вы не знаете высоту других элементов (например, если они содержат переменное количество дочерних элементов).
вы также можете использовать 100vh, любой, кто делает это: не забудьте поставить пробелы между минусом и элементами
Лучше использовать 100vh, а затем вычесть заголовок, поэтому calc(100vh - 10px).
Сейчас есть масса ответов, но я обнаружил, что height: 100vh; используется для работы с элементом div, который должен заполнить все доступное вертикальное пространство.
Таким образом, мне не нужно возиться с отображением или позиционированием. Это пригодилось при использовании Bootstrap для создания панели инструментов, в которой у меня были боковая панель и главная. Я хотел, чтобы основная часть растягивалась и заполняла все вертикальное пространство, чтобы я мог применить цвет фона.
div {
height: 100vh;
}
Поддерживает IE9 и выше: нажмите, чтобы увидеть ссылку
Но 100vh звучит как вся высота, а не остальная высота. Что делать, если у вас есть заголовок, и вы хотите заполнить остальное
Disclaimer: The accepted answer gives the idea of the solution, but I'm finding it a bit bloated with an unnecessary wrapper and css rules. Below is a solution with very few css rules.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
В приведенном выше решении используются единицы просмотра и Flexbox, следовательно, это IE10 +, при условии, что вы используете старый синтаксис для IE10.
Codepen для игры: ссылка на код
Или этот, для тех, кому нужен основной контейнер с возможностью прокрутки в случае переполнения содержимого: ссылка на код
главная {высота: 10 пикселей; гибкость: 1; переполнение: авто}
Потратив часы и протестировав несколько подходов, этот оказался лучшим! Это лаконично, просто и умно.
Использовал:
height: calc(100vh - 110px);
код:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class = "header">
<h2>My header</h2>
</div>
<div class = "body">
<p>The body</p>
</div>
<div class = "footer">
My footer
</div>Это, безусловно, самое простое из всех решений, перечисленных на этой странице.
Отталкиваясь от идеи мистера Чужого ...
Это кажется более чистым решением, чем популярный гибкий блок для браузеров с поддержкой CSS3.
Просто используйте min-height (вместо height) с calc () для блока содержимого.
Calc () начинается со 100% и вычитает высоту верхних и нижних колонтитулов (необходимо включать значения отступов)
Использование «min-height» вместо «height» особенно полезно, так как оно может работать с отображаемым содержимым javascript и фреймворками JS, такими как Angular2. В противном случае при вычислении нижний колонтитул не будет перемещаться в нижнюю часть страницы после того, как визуализированный контент javascript станет видимым.
Вот простой пример верхнего и нижнего колонтитула с использованием высоты 50 пикселей и отступа 20 пикселей для обоих.
HTML:
<body>
<header></header>
<div class = "content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Конечно, математику можно упростить, но вы поняли ...
У меня была такая же проблема, но я не мог заставить работать решение с гибкими боксами, указанным выше. Итак, я создал свой собственный шаблон, который включает:
- заголовок с элементом фиксированного размера
- нижний колонтитул
- боковая полоса с полосой прокрутки, занимающая оставшуюся высоту
- содержание
Я использовал флексбоксы, но более простым способом, используя только свойства дисплей: гибкий и flex-direction: строка | столбец:
Я использую angular и хочу, чтобы размеры моих компонентов составляли 100% от их родительского элемента.
Главное - установить размер (в процентах) для всех родителей, чтобы ограничить их размер. В следующем примере высота myapp составляет 100% области просмотра.
Главный компонент занимает 90% области просмотра, потому что верхний и нижний колонтитулы занимают 5%.
Я разместил свой шаблон здесь: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id = "myapp">
<div id = "header">
HEADER
<div class = "fized_size_element"></div>
</div>
<div id = "main">
<div id = "sidebar">
SIDEBAR
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
<div class = "fized_size_element"></div>
</div>
<div id = "content">
CONTENT
</div>
</div>
<div id = "footer">
FOOTER
</div>
</div>
</body>
Это динамическое вычисление пространства экрана напоминания, лучше с использованием Javascript.
Вы можете использовать технологию CSS-IN-JS, как показано ниже в lib:
Для мобильного приложения я использую только VH и VW
<div class = "container">
<div class = "title">Title</div>
<div class = "content">Content</div>
<div class = "footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Демо - https://jsfiddle.net/u763ck92/
Это неправильное решение. vh несовместим с мобильными браузерами. Подробнее см. Здесь: stackoverflow.com/questions/37112218/…
Как насчет того, чтобы вы просто использовали vh, что означает view height в CSS ...
Посмотрите на фрагмент кода, который я создал для вас ниже, и запустите его:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class = "full-height">
</div>Также посмотрите на изображение ниже, которое я создал для вас:
Это хорошо, только если вы хотите, чтобы div занимал всю высоту окна. Теперь поместите над ним заголовок div с неизвестной высотой.
@LarryBud, вы правы, это делает обертку div, поэтому все должно быть внутри этого div ...
Просто определяем body с помощью display:grid и grid-template-rows с использованием auto и свойства значения fr.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer> style = "height:100vh"
решил проблему для меня. В моем случае я применил это к необходимому div
В Bootstrap:
Стили CSS:
html, body {
height: 100%;
}
1) Просто заполните высоту оставшегося места на экране:
<body class = "d-flex flex-column">
<div class = "d-flex flex-column flex-grow-1>
<header>Header</header>
<div>Content</div>
<footer class = "mt-auto">Footer</footer>
</div>
</body>
2) заполните высоту оставшегося пространства экрана и выровняйте содержимое по середине родительского элемента:
<body class = "d-flex flex-column">
<div class = "d-flex flex-column flex-grow-1">
<header>Header</header>
<div class = "d-flex flex-column flex-grow-1 justify-content-center">Content</div>
<footer class = "mt-auto">Footer</footer>
</div>
</body>
Это моя собственная минимальная версия решения Pebbl. Потребовалось много времени, чтобы найти способ заставить его работать в IE11. (Также протестировано в Chrome, Firefox, Edge и Safari.)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
section {
display: flex;
flex-direction: column;
height: 100%;
}
div:first-child {
background: gold;
}
div:last-child {
background: plum;
flex-grow: 1;
}<body>
<section>
<div>FIT</div>
<div>GROW</div>
</section>
</body>Еще одно решение с использованием CSS-сетка
Определить сетку
.root {
display: grid;
grid-template-rows: minmax(60px, auto) minmax(0, 100%);
}
Первая строка (заголовок): минимальная высота может быть установлена, а максимальная высота будет зависеть от содержимого. Вторая строка (содержимое) будет пытаться уместить свободное пространство, оставшееся после заголовка.
Преимущество этого подхода в том, что контент можно прокручивать независимо от заголовка, поэтому заголовок всегда находится вверху страницы.
body, html {
margin: 0;
height: 100%;
}
.root {
display: grid;
grid-template-rows: minmax(60px, auto) minmax(0, 100%);
height: 100%;
}
.header {
background-color: lightblue;
}
button {
background-color: darkslateblue;
color: white;
padding: 10px 50px;
margin: 10px 30px;
border-radius: 15px;
border: none;
}
.content {
background-color: antiquewhite;
overflow: auto;
}
.block {
width: calc(100% - 20px);
height: 120px;
border: solid aquamarine;
margin: 10px;
}<div class = "root">
<div class = "header">
<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
</div>
<div class = "content">
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
<div class = "block"></div>
</div>
<div class = "footer"></div>
</div>Все, что вам нужно сделать, это просто установить высоту, чтобы растянуть или заполнить так
.divName {
height: stretch
}
Вот ответ с использованием сеток.
.the-container-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto min-content;
height: 100vh;
}
.view-to-remain-small {
grid-row: 2;
}
.view-to-be-stretched {
grid-row: 1
}
Для тех, кто столкнется с этим в будущем, вы можете получить желаемый макет таблицы в большинстве браузеров без разметки таблицы, используя
display:tableи связанные свойства, см. этот ответ по очень похожему вопросу.