Сделать 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% пространства экрана. До сих пор, обертывание всего вещь в столе-это единственное, что работает.

30 ответов


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

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

Примечание: хотя спецификация компоновки гибких ящиков CSS находится на стадии рекомендации кандидата, не все браузеры реализовали ее. Внедрение в WebKit префикс должен быть с -в WebKit-; интернет 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 вы можете легко переключаться между любыми строками или столбцами, имеющими фиксированные размеры, Размеры содержимого или размеры оставшегося пространства. В моем примере я установил заголовок для привязки к его содержимому (в соответствии с вопросом OPs), я добавил нижний колонтитул, чтобы показать, как добавить область фиксированной высоты, а затем установить область содержимого для заполнения оставшейся пространство.

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 в flex-grow, flex-shrink и flex-basis свойства, чтобы создать гибкость элементов флекс. Mozilla есть хорошее введение к модели гибких коробок.


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

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

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

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


исходный пост более 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>

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

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% используя


использовать: 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>

это может быть сделано чисто 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


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

HTML-код:

<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:

.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;
}

исходный источник: заполнение оставшейся высоты контейнера при обработке переполнения в CSS

JSFiddle интерактивный просмотр


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

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


CSS3 с простым способом

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

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


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

посмотреть код Я создал для вас ниже и запустить его:

body {
  padding: 0;
  margin: 0;
}

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

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

Make a div fill the height of the remaining screen space


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

padding-bottom: 100%;

простое решение, используя flexbox:

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

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

образец Codepen

альтернативное решение с div, центрированным в содержимом div


<!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 (который всегда имеет видимую полосу прокрутки окна просмотра, но отключен), но без нее содержимое будет обрезаться, если оно переполняется.


отказ от ответственности: принятый ответ дает представление о решении, но я нахожу его немного раздутым с ненужной оберткой и правилами 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


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

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

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


Я wresteled с этим на некоторое время и в конечном итоге с следующее:

поскольку легко сделать контент 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%;
}

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

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

для меня


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

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

div {
    height: 100vh;
}

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


вы можете использовать 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>

Винсент, я отвечу снова, используя ваши новые требования. Поскольку вас не волнует, что содержимое скрыто, если оно слишком длинное, вам не нужно плавать заголовок. Просто поместите переполнение, скрытое в тегах 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>

CSS Grid решение

просто определение body С display:grid и grid-template-rows используя auto и fr свойство value.

* {
  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


попробуй такое

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

 style="height:100vh"

решил проблему для меня. В моем случае я применил это к требуемому div


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


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


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

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

я использовал flexboxes, но более простым способом, используя только свойства дисплей: flex и flex-направление: строка / столбец:

Я использую 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>

спиннинг идею г-н иностранец...

Это кажется более чистым решением, чем популярная flex box one для браузеров с поддержкой 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));
}

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


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

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

https://github.com/cssobj/cssobj

демо:https://cssobj.github.io/cssobj-demo/


это никогда не работал для меня по-другому, а затем с использованием JavaScript как NICCAI предложил в самый первый ответ. Я использую этот подход для масштабирования <div> С картами Google.

вот полный пример того, как это сделать (работает в 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>