it-swarm.com.ru

Сделать 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% экранного пространства. Пока единственное, что работает, - это завернуть все в таблицу.

1605
Vincent McNabb

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

876
Pebbl

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

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

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

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

218
NICCAI

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

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

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

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

Demo

Предполагаемая разметка

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

82
Mr. Alien

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

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

34
Alireza

CSS3 Simple Way

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

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

30
dev.meghraj

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

26
zok

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

26
Ormoz

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

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 live preview

25
John Kurlak

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

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

22
Chris

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

padding-bottom: 100%;
21

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

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

12
Jerph

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

Поскольку содержимое 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
B_G

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

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

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

10
Mikko Rantalainen

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

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

div {
    height: 100vh;
}

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

10
Puiu

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

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
Thaoms
 style="height:100vh"

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

7
Zohab Ali

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

6
Paulie_D

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

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

Попробуй это

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

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

3
htho

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

3
grinmax

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

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

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

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

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

Вот простой пример заголовка и нижнего колонтитула, использующих 50px height и 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));
}

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

2
Pat M

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

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

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

Я использую angular и ​​хочу, чтобы размеры моих компонентов составляли 100% от их родительского элемента.

Ключ должен установить размер (в процентах) для всех родителей, чтобы ограничить их размер. В следующем примере высота myapp имеет 100% области просмотра.

Основной компонент имеет 90% области просмотра, потому что верхний и нижний колонтитулы имеют 5%.

Я разместил свой шаблон здесь: https://jsfiddle.net/abreneliere/mrjh6y2e/

       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>
2
Anthony Brenelière

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

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

https://github.com/cssobj/cssobj

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

0
James Yang