Сделать 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>

Вся высота страницы заполнена, и прокрутка не требуется.

Для чего-либо внутри содержимого div, установка top: 0;поместит его прямо под заголовком. Иногда содержимое будет реальной таблицей с высотой, установленной на 100%. Помещение headerвнутрь contentне позволит этому работать.

Есть ли способ добиться того же эффекта без использования table?

Обновить:

Элементы внутри контента также divбудут иметь высоту, установленную в процентах. Так что что-то на 100% внутри divзаполнит его до дна. Как будет два элемента на 50%.

Обновление 2:

Например, если заголовок занимает 20% высоты экрана, таблица, указанная в 50% внутри, #contentбудет занимать 40% пространства экрана. Пока единственное, что работает, - это завернуть все в таблицу.

18.09.2008 05:06:17
Для любого, кто споткнется здесь в будущем, вы можете получить желаемую разметку таблицы в большинстве браузеров, без разметки таблицы, используя display:tableи связанные свойства, см. Этот ответ на очень похожий вопрос.
AmeliaBR 20.01.2014 02:23:12
Я пытался восстановить ваши настройки - jsfiddle.net/ceELs - но это не работает, что я пропустил?
Gill Bates 14.04.2014 12:12:05
@Мистер. Ответ пришельца прост и полезен, зацените его http://stackoverflow.com/a/23323175/188784
Gohan 20.06.2014 03:30:51
На самом деле то, что вы описываете, не работает, даже с таблицами: если содержимое занимает больше вертикального пространства, чем высота экрана, ячейка таблицы и вся таблица будут расширяться за пределы экрана. Переполнение вашего контента: авто не будет отображать полосу прокрутки.
Damien 1.07.2014 20:00:04
@GillBates это будет работать после того, как вы укажете высоту родительского элемента, посмотрите на jsfiddle.net/ceELs/5
Michal Vašut 30.09.2014 09:45:49
30 ОТВЕТОВ
РЕШЕНИЕ

Обновление 2015: подход flexbox

Есть два других ответа, кратко упоминающих flexbox ; однако это было более двух лет назад, и они не дают никаких примеров. Спецификация для flexbox определенно исчерпана.

Примечание. Хотя спецификация CSS Flexible Boxes Layout находится на этапе рекомендации кандидата, не все браузеры его реализовали. Реализация WebKit должна иметь префикс -webkit-; Internet Explorer реализует старую версию спецификации с префиксом -ms-; В Opera 12.10 реализована последняя версия спецификации без префикса. См. Таблицу совместимости для каждого свойства для получения информации о состоянии совместимости.

(взято с https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/F 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 , выше, гибкий Shorthands недвижимости прогибается вырастал , изгибать-усадочный и прогибаются базисные свойства , чтобы установить гибкость гибких элементов. Mozilla хорошо знакомит с моделью гибких коробок .

1074
19.09.2016 19:30:17
Почему flex: 0 1 30px;атрибут в box .rowкачестве override в каждом div?
Erdal G. 15.11.2015 09:36:39
Вот поддержка браузера для flexbox - приятно видеть все это зеленое - caniuse.com/#feat=flexbox
Brian Burns 10.05.2016 18:40:04
Ссылка на Flexie.js не работает. Здесь проект github github.com/doctyper/flexie
ses3ion 10.06.2016 10:49:06
Определенно, это очень хороший подход, и он почти работает;) Существует небольшая проблема, когда содержимое div.content превышает исходную высоту сгибания. В текущей реализации «нижний колонтитул» будет толкаться ниже, и это не то, чего ожидают разработчики;) Так что я сделал очень простое решение. jsfiddle.net/przemcio/xLhLuzf9/3 Я добавил дополнительную гибкость для контейнера и прокрутки переполнения.
przemcio 13.07.2016 21:55:59
@przemcio хороший момент, но я не думаю , имея прокручивать содержание, что каждый разработчик ожидает;) - вы должны только добавить overflow-y: autoк , .row.contentчтобы достичь того, что вам нужно , однако.
Pebbl 1.10.2016 11:51:57

Если единственной проблемой является высота, то, похоже, просто работает div:

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

В простом тесте ширина заголовка / содержимого отличается в вашем и моем примере, но я не уверен из вашего поста, беспокоитесь ли вы о ширине?

-8
18.09.2008 05:25:13
Это не совсем то, что я хочу сделать. Я хочу, чтобы содержимое divзаполняло оставшуюся часть экрана, а не соответствовало высоте экрана.
Vincent McNabb 18.09.2008 05:33:40
Это похоже на то, что делает мой пример, по крайней мере, когда я пытаюсь это сделать. Разве вы не видите такое поведение?
Bruce 20.09.2008 02:46:12
Попробуйте поместить таблицу внутри содержимого, которое имеет размер 100%. Он не будет работать.
Vincent McNabb 29.09.2008 22:08:37
<!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 "header" перед содержимым, как один брат, и тот же CSS будет работать. Однако IE7- неправильно интерпретирует высоту, если в этом случае значение float составляет 100%, поэтому заголовок должен быть в содержимом, как указано выше. Переполнение: авто вызовет двойные полосы прокрутки в IE (у которого всегда есть видимая, но отключенная полоса прокрутки в окне просмотра), но без нее содержимое будет обрезаться при переполнении.

13
18.09.2008 06:01:58
Закрыть! Почти то, что я хочу, за исключением того, что я собираюсь поместить другие вещи в div... то есть top: 0;поместит что-то прямо под заголовком. Я снова изменю свой вопрос, потому что вы ответили на него отлично, и все же не то, что я хочу! Я просто спрячу переполнение, так как содержимое должно соответствовать.
Vincent McNabb 18.09.2008 07:50:41
-1: Этот ответ создает div, называемый контентом, который покрывает весь экран, а не остальную часть экрана
Casebash 19.05.2011 05:44:33

На самом деле в CSS нет надежного кросс-браузерного способа сделать это. Предполагая, что ваш макет имеет сложности, вам нужно использовать JavaScript, чтобы установить высоту элемента. Суть того, что вам нужно сделать, это:

Element Height = Viewport height - element.offset.top - desired bottom margin

Как только вы сможете получить это значение и установить высоту элемента, вам нужно прикрепить обработчики событий как к окнам onload, так и к onresize, чтобы вы могли запустить функцию изменения размера.

Кроме того, предполагая, что ваш контент может быть больше, чем область просмотра, вам нужно установить overflow-y для прокрутки.

226
3.09.2013 17:52:04
Это то, что я подозревал. Тем не менее, приложение также будет работать с отключенным Javascript, поэтому я думаю, что я просто буду продолжать использовать таблицу.
Vincent McNabb 18.09.2008 09:22:12
Винсент, держи себя в руках. Я хотел сделать то же самое, и это кажется невозможным с CSS? Я не уверен, но, тем не менее, ни одно из других решений не сделает то, что вы описали. Javascript один является единственным, который работает правильно на данный момент.
Travis 4.05.2010 20:00:03
Что
Techsin 17.11.2013 08:55:26
Я имею в виду ... почему мы не используем calc в 2013 году?
kamii 19.02.2014 23:21:27
высота: calc (100vh - 400px); это правильный стиль CSS, который делает именно то, о чем этот пост. Все другие решения основаны на фиксированной родительской высоте или отображении блока.
WilliamX 14.11.2018 00:24:26

Винсент, я отвечу снова, используя твои новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно перемещать заголовок. Просто оставьте переполнение скрытым в тегах 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>
5
20.08.2014 23:11:27
Уже думал об этом. Но это тоже не работает. Я просто собираюсь придерживаться, tableпотому что это работает. Спасибо за обновление, хотя.
Vincent McNabb 18.09.2008 18:02:42

Я тоже искал ответ на этот вопрос. Если вам достаточно повезло, что вы можете использовать IE8 и выше, вы можете использовать display:tableи связанные значения, чтобы получить правила рендеринга таблиц с элементами уровня блока, включая div.

Если вам даже повезло, и ваши пользователи используют браузеры высшего уровня (например, если это приложение для внутренней сети на компьютерах, которыми вы управляете, как, например, мой последний проект), вы можете использовать новый Гибкий макет коробки в CSS3!

24
26.12.2017 19:20:39

Некоторое время я боролся с этим и в итоге получил следующее:

Поскольку контент 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%;
}
10
31.10.2013 10:39:44
Что если вы не знаете высоту заголовка?
Yugal Jindle 17.03.2013 07:46:49

он никогда не работал для меня иначе, чем с использованием 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>
-3
28.01.2016 13:15:29

Что сработало для меня (с div внутри другого div, и я предполагаю, что во всех других обстоятельствах), это установить нижний отступ на 100%. То есть добавьте это в свою таблицу CSS / стилей:

padding-bottom: 100%;
22
31.10.2013 10:28:29
100% чего? Если я попробую это, я получу огромное пустое пространство, и начнется прокрутка.
mlibby 23.11.2013 15:44:29
100% размера окна просмотра может быть @mlibby. Если вы установите html и body на 100% высоты, то div может перейти на 100%. Только с одним div, 100% будет относительно содержания div. Я не пробовал это с вложенным div.
Jess 18.09.2014 01:44:57
Это означает 100% высоты элемента (добавляется как заполнение элемента), что делает его удвоенной высотой. Нет уверенности, что это заполнит страницу, и определенно не ответ на вопрос. Как уже отмечалось, он может заполнять больше, чем окно просмотра.
Martin 1.07.2015 10:43:41
padding-bottom: 100% устанавливает высоту + 100% ширины
Romeno 1.06.2016 17:24:44
from w3school: задает нижний отступ в процентах от ширины элемента. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa 12.09.2018 03:59:43

Оригинальный пост более 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>

165
11.03.2018 08:16:00
Есть только одна проблема: верхний и нижний колонтитулы не имеют автоматического размера. То есть реальная трудность, и что почему «это не возможно» ответ в настоящее время в верхней части ...
Roman Starkov 4.03.2012 17:16:43
Мне нужен заголовок размером 55px и div, который заполняет остальную часть высоты документа. это решение!
Matías Cánepa 11.09.2012 00:46:21
Вы бомба, я так долго пробовал, и это единственное решение, которое я нашел. Мне нужно, чтобы мой навигационный элемент имел высоту 60px в верхней части, а оставшийся - 100%, это решило эту проблему.
Adam Waite 7.01.2013 10:07:03
Это работает хорошо, за исключением того, что у меня небольшая проблема - если я помещаю элемент с display: tableтелом, он, кажется, переполняет тело. Это height: 100%не дает правильной высоты.
GSTAR 8.03.2014 00:38:07
.colне используется, не так ли?
slartidan 2.11.2015 12:34:58

Почему не просто так?

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 (в таком порядке) высоту, а затем просто дать вашим элементам высоту?

Работает для меня

9
22.10.2013 00:05:50
Дело в том, что если пользователь использует большой экран для просмотра этой страницы, а высота вашего заголовка установлена ​​точно на 100 пикселей, что меньше 40% от текущей высоты, между вашим заголовком и контекстом тела будет большой пробел.
Saorikido 14.05.2015 08:13:05

Я нашел довольно простое решение, потому что для меня это была просто проблема дизайна. Я хотел, чтобы остальная часть страницы не была белой под красным колонтитулом. Поэтому я установил красный цвет фона страниц. И содержимое backgroundcolor к белому. При высоте содержимого, например, 20em или 50% почти пустая страница не оставит всю страницу красной.

3
14.09.2012 08:02:34

Попробуй это

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
4
31.10.2013 10:40:22

Если вы можете справиться с неподдержкой старых браузеров (т. Е. MSIE 9 или более старых), вы можете сделать это с модулем гибкой компоновки, который уже является W3C CR. Этот модуль позволяет использовать и другие полезные приемы, такие как изменение порядка содержимого.

К сожалению, MSIE 9 или ниже не поддерживает это, и вы должны использовать префикс поставщика для свойства CSS для каждого браузера, кроме Firefox. Надеемся, что другие поставщики тоже скоро прекратят использование префикса.

Другим вариантом может быть CSS Grid Layout, но он еще меньше поддерживается стабильными версиями браузеров. На практике только MSIE 10 поддерживает это.

10
3.05.2013 10:55:31

Вместо использования таблиц в разметке вы можете использовать таблицы 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 +, все современные браузеры и мобильные устройства ( caniuse )


Просто для полноты, вот эквивалентные элементы HTML для свойств CSS для модели таблицы 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 } 
142
13.04.2016 14:09:16
Я только что указал на технику таблиц CSS . Оказывается, ответ уже был уже в этом ответе на вопрос. Это лучшее решение; чистый, элегантный и использующий именно тот инструмент, который был предназначен. Таблицы CSS
Ian Boyd 10.08.2013 22:27:50
Код скрипты не совсем соответствует ответу здесь. Добавление html, body { height: 100%, width: 100% }показалось критическим в моих тестах.
mlibby 23.11.2013 16:14:37
Раздражающие свойства таблиц CSS точно такие же, как и в обычных таблицах: если содержимое слишком велико, они расширяют ячейку, чтобы соответствовать. Это означает, что вам все равно может понадобиться ограничить размер (max-height) или установить высоту из кода, если страница динамическая. Я очень скучаю по сеткам Silverlight! :(
Gone Coding 24.02.2014 17:32:15
Вы всегда можете добавить абсолютно позиционированный контейнер внутри элемента строки таблицы, а затем установить его ширину и высоту на 100%. Не забудьте также установить относительное положение в элементе строки таблицы.
Mike Mellor 13.05.2016 16:40:33
@MikeMellor не работает в IE11, хотя, поскольку он, похоже, игнорирует relativeпозиционирование table-rowэлемента, он принимает высоту первого позиционного асцендента, который не является элементом таблицы.
dwelle 30.08.2016 16:32:40

Вы можете использовать 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>
7
1.08.2013 14:47:28
Хороший ответ, за который я проголосовал, но, к сожалению, он не работает с IE8, который еще долго будет существовать.
Vincent McNabb 9.07.2013 06:24:16
Такие приложения, как Gmail, используют Javascript для определения размера, что в любом случае является лучшим решением, чем CSS в большинстве случаев.
Vincent McNabb 9.07.2013 21:31:54
Я думаю, что они используют Javascript, потому что нет другого хорошего кросс-браузерного CSS-решения, а не потому, что оно лучше.
Greg 9.07.2013 21:37:44
@VincentMcNabb Работает в IE8 w3schools.com/cssref/pr_class_display.asp . Просто требуется! DOCTYPE декларация. Никогда даже не знал о табличном значении для атрибута отображения. Классное решение. +1
Govind Rai 25.09.2016 05:45:38

Подход только 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%;для родительских элементов.

92
5.02.2020 20:11:28
ОП сказал, что заголовок может быть произвольной высоты. Поэтому, если вы не знаете высоту заранее, вы не сможете использовать calc :(
Danield 28.04.2014 08:20:35
@Danield Вот почему я упомянул фиксированную высоту :)
Mr. Alien 28.04.2014 10:52:02
Это решение, которое работало для меня и не требовало от меня перепроектирования моих существующих страниц вокруг флексбоксов. Если вы используете LESS, то есть Bootstrap, обязательно прочитайте статью о том, как выйти из функции calc (), чтобы LESS не справился с ней.
jlyonsmith 1.08.2015 00:48:32
Оп сказал: «Это может быть произвольная высота». Произвольные средства решаются дизайнером, поэтому фиксируются. Это решение, безусловно, лучшее.
jck 25.04.2018 16:09:28

Это может быть сделано просто с 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

28
21.07.2019 13:29:52
Вау, никогда не слышал vhи о vwединицах раньше. Больше информации: snook.ca/archives/html_and_css/vm-vh-units
Steve Bennett 1.04.2015 11:30:58
К сожалению, это не поддерживает IE8 :(
Scott 6.01.2016 21:01:31
Я попробовал этот подход, но height: 100%on #contentзаставил его высоту соответствовать высоте #page, игнорируя #tdcontentвысоту вообще. С большим количеством контента полоса прокрутки выходит за пределы нижней части страницы.
Real Name Redacted 8.07.2016 13:44:01

Ни одно из опубликованных решений не работает, если вам нужен нижний блок для прокрутки, когда содержимое слишком высокое. Вот решение, которое работает в этом случае:

.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 предварительный просмотр

28
5.02.2020 18:01:03
Спасибо!!! Я попробовал все ответы, не относящиеся к таблицам, не относящиеся к флексбоксу, и это единственный, который работал на 100% правильно. Один вопрос: в оригинальном источнике есть только один body-content-wrapper, и кажется, что все работает без двойной оболочки (без всяких table-cells). Есть ли проблема с этим?
Real Name Redacted 8.07.2016 14:26:32
@BrandonMintern Если у вас нет ячеек таблицы, это не работает в IE8 и IE9. (См. Комментарий в оригинальной статье.)
John Kurlak 9.07.2016 21:50:46
Да, ячейки также требуются в IE10. К сожалению, в IE10 и ниже .bodyвысота в конечном итоге будет такой же, как и на .container. Вертикальная полоса прокрутки все еще находится в нужном месте, но в .containerитоге она растягивается больше, чем мы хотим. Когда это полноэкранный режим, нижняя часть .bodyнаходится вне нижней части экрана.
Real Name Redacted 11.07.2016 22:16:06
Спасибо, @JohnKurlak. Это единственное решение, которое сработало в моей ситуации (способ flexbox был заблокирован ошибочным поведением в конкретной версии Chrome, используемой моим клиентом)
Maksym Demidas 24.02.2020 13:10:51
Святой ****! Я так долго искал этот ответ! Огромное спасибо. Flexbox здесь не сработал, но ящики для таблиц действительно работали. Удивительный.
aabbccsmith 8.03.2020 10:24:43

Простое решение с использованием 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 в центре содержимого div

41
8.04.2019 15:08:41
Это лучший ответ наверняка. Работает как очарование для домашних страниц hero-img или комбо героя-img с помощью панели навигации
noobcoderiam 23.05.2019 18:27:24
jsfiddle.net/31ng75du/5 Протестировано с Chrome, FF, Edge, Vivaldi
user2360831 4.01.2020 16:39:42

CSS3 простой способ

height: calc(100% - 10px); // 10px is height of your first div...

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

33
11.03.2018 16:13:52
Это не работает, если вы не знаете высоту других элементов (например, если они содержат переменное количество дочерних элементов).
Ege Ersoz 19.03.2019 17:53:48
Вы также можете использовать 100vh, любой, кто делает это: обязательно ставьте пробелы между минусом и элементами
htafoya 27.03.2019 03:59:05

Сейчас есть масса ответов, но я обнаружил, что использую height: 100vh;для работы с элементом div, который должен заполнить все доступное вертикальное пространство.

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

div {
    height: 100vh;
}

Поддерживает IE9 и выше: нажмите, чтобы увидеть ссылку

18
19.02.2019 17:28:18
Но 100vh звучит как вся высота, а не остальная высота. Что делать, если у вас есть заголовок, а вы, то вы хотите заполнить остальные
Epirocks 13.03.2018 10:05:12

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

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, чтобы играть с: ссылка на codepen

Или этот, для тех, кому нужен прокручиваемый основной контейнер в случае переполнения контента: ссылка на codepen

19
3.01.2016 17:16:47
main {height: 10px; flex: 1; переполнение: авто}
Naeem Baghi 1.01.2018 13:22:59
Потратив часы и испытав несколько подходов, этот был лучшим! Это сжато, просто и умно.
marciowb 7.09.2019 17:33:48

Используемый: 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>

56
22.05.2016 03:20:04
На мой взгляд самое чистое решение. Конечно, это лучше, чем добавлять javascript. (но ответ был уже опубликован в 2015 году кем-то другим)
bvdb 22.01.2019 11:52:54
это чувствует себя намного чище.
theprogrammer 31.03.2019 05:36:20

Отвергая идею мистера Чужого ...

Это кажется более чистым решением, чем популярный flex box для браузеров с поддержкой CSS3.

Просто используйте min-height (вместо height) с calc () для блока содержимого.

Calc () начинается со 100% и вычитает высоту верхних и нижних колонтитулов (необходимо включить значения отступов)

Использование «min-height» вместо «height» особенно полезно, поэтому оно может работать с визуализированным содержимым javascript и средами JS, такими как Angular2. В противном случае вычисление не будет сдвигать нижний колонтитул в конец страницы, когда визуализированный контент javascript станет видимым.

Вот простой пример верхнего и нижнего колонтитула с использованием высоты 50px и отступов 20px для обоих.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Конечно, математику можно упростить, но вы поняли ...

3
13.12.2017 11:01:29

У меня была такая же проблема, но я не мог заставить работать решение с флексбоксами выше. Поэтому я создал свой собственный шаблон, который включает в себя:

  • заголовок с элементом фиксированного размера
  • нижний колонтитул
  • боковая панель с полосой прокрутки, которая занимает оставшуюся высоту
  • содержание

Я использовал flexbox, но более простым способом, используя только свойства display: flex и flex-direction: row | column :

Я использую угловой и хочу, чтобы размеры моих компонентов составляли 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>
3
25.08.2016 16:20:25

Это динамическое вычисление места на экране напоминания, лучше с использованием Javascript.

Вы можете использовать технологию CSS-IN-JS, как показано ниже: lib:

https://github.com/cssobj/cssobj

ДЕМО: https://cssobj.github.io/cssobj-demo/

0
13.10.2016 02:28:18

Для мобильного приложения я использую только 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/

4
1.02.2017 15:59:23
Это не правильное решение. Vh несовместим в мобильных браузерах. Для получения более подробной информации смотрите здесь: stackoverflow.com/questions/37112218/…
HarshMarshmallow 17.04.2017 17:59:19

Как насчет того, чтобы просто использовать то, vhчто расшифровывается view heightв CSS ...

Посмотрите на фрагмент кода, который я создал для вас ниже, и запустите его:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Также посмотрите на изображение, которое я создал для вас ниже:

Сделать div заполнить высоту оставшегося места на экране

37
1.06.2018 05:46:05
Это хорошо, только если вы хотите, чтобы div занимал всю высоту окна. Теперь поместите заголовок div над ним с неизвестной высотой.
LarryBud 9.03.2018 01:53:31
@LarryBud вы правы, это делает div обертки, поэтому все должно идти внутри этого div ...
Alireza 9.03.2018 02:42:17

CSS Grid Solution

Просто определяя с 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>

Полное руководство по сеткам @ CSS-Tricks.com

8
4.07.2017 14:27:17