Сделайте div, чтобы заполнить высоту оставшегося экрана.

Ответ 1

2015: подход flexbox

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

Примечание. Хотя спецификация компоновки таблиц CSS Flexible Boxes находится на этапе рекомендации кандидата, не все браузеры ее реализовали. Реализация 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>

Ответ 2

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

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

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

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

Ответ 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>

Ответ 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)

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 } 

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

Ответ 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>

Ответ 7

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

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

body {
  padding: 0;
  margin: 0;
}

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

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

Ответ 8

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

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

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

Ответ 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

Ответ 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>

Ответ 11

Ни одно из выпущенных решений не работает, когда вам нужно, чтобы нижний 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 в прямом эфире

Ответ 12

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

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

Ответ 13

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

padding-bottom: 100%;

Ответ 14

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

main {
  flex: 1;                 /* this will make the container take the free space */
}

В приведенном выше решении используются единицы просмотра и flexbox, и поэтому IE10 +, предоставляя вам старый синтаксис для IE10.

Codepen, чтобы играть с: ссылка на codepen

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

Ответ 15

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

Ответ 16

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

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

div {
    height: 100vh;
}

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

Ответ 17

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

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

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

Ответ 18

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

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

Ответ 19

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

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

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

Ответ 20

 style="height:100vh"

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

Ответ 21

Решение сетки CSS

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

Ответ 22

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

Ответ 23

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

Ответ 24

Попробуйте это

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

Ответ 25

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

Ответ 26

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

Ответ 27

Скручивая идею г-на Чужого...

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

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

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

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

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

Html:

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

Css:

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

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

Ответ 28

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

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

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

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

Ответ 29

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

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

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

Ответ 30

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