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

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

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

Answer 2

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

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

Answer 3

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

padding-bottom: 100%;

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

div {
    height: 100vh;
}

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

Answer 9

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

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

У меня работает

Answer 10

 style="height:100vh"

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