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

Question

Я работаю над веб-приложением, в котором я хочу, чтобы содержимое занимало всю высоту экрана.

Страница имеет заголовок, который содержит логотип и информацию об учетной записи. Это может быть произвольная высота. Я хочу, чтобы 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% пространства экрана. Пока единственное, что работает - это завернуть все в таблицу.

Answer 1

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/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 свойство flex сокращает свойства flex-grow , flex-shrink и flex-based установить гибкость гибких элементов. У Mozilla есть хорошее представление о модели гибких коробок .

Answer 2

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

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

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

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

Answer 3

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

Answer 4

Вместо использования таблиц в разметке вы можете использовать таблицы 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 } 

Answer 5

Подход только CSS (если высота известна / фиксирована)

Если вы хотите, чтобы средний элемент охватывал всю страницу по вертикали, вы можете использовать calc(), который представлен в CSS3.

Предполагая, что у нас есть фиксированная высота header и footer элементы, и мы хотим, чтобы тег section занимал всю доступную вертикальную высоту ...

Демо

Предполагаемая наценка

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Так что ваш 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;
}

Итак, вот что я делаю, складываю высоту элементов, а затем вычитаю из 100% с помощью функции calc().

Просто убедитесь, что вы используете height: 100%; для родительских элементов.

Answer 6

Используется: 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>

Answer 7

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

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

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

Answer 8

CSS3 Simple Way

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

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

Answer 9

Это можно сделать только с помощью 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

Answer 10

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