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


1911

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

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


31
Для любого, кто споткнется здесь в будущем, вы можете получить желаемую разметку таблицы в большинстве браузеров, без разметки таблицы, используя display:tableи связанные свойства, см. Этот ответ на очень похожий вопрос.
AmeliaBR

3
Я пытался восстановить ваши настройки - jsfiddle.net/ceELs - но это не работает, что я пропустил?
Джилл Бейтс,

5
@Г-н. Ответ пришельца прост и полезен, зацените его http://stackoverflow.com/a/23323175/188784
Гохан,

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

@GillBates это будет работать после того, как вы укажете высоту родительского элемента, посмотрите на jsfiddle.net/ceELs/5
Михал Вашут,

Ответы:


1117

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


9
Почему flex: 0 1 30px;атрибут в box .rowкачестве override в каждом div?
Эрдал Г.

11
Вот поддержка браузера для flexbox - приятно видеть все это зеленое - caniuse.com/#feat=flexbox
Брайан Бернс

1
Ссылка на Flexie.js не работает. Здесь проект github github.com/doctyper/flexie
ses3ion

52
Определенно, это очень хороший подход, и он почти работает;) Есть небольшая проблема, когда содержимое div.content превышает исходную высоту сгибания. В текущей реализации «нижний колонтитул» будет толкаться ниже, и разработчики этого не ожидают;) Поэтому я сделал очень простое решение. jsfiddle.net/przemcio/xLhLuzf9/3 Я добавил дополнительную гибкость для контейнера и прокрутки переполнения.
przemcio

12
@przemcio хороший момент, но я не думаю , имея прокручивать содержание, что каждый разработчик ожидает;) - вы должны только добавить overflow-y: autoк , .row.contentчтобы достичь того, что вам нужно , однако.
Пеббл

226

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

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

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

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


2
Это то, что я подозревал. Тем не менее, приложение также будет работать с отключенным Javascript, поэтому я думаю, что я просто буду продолжать использовать таблицу.
Винсент Макнабб

6
Винсент, держи себя в руках. Я хотел сделать то же самое, и это кажется невозможным с CSS? Я не уверен, но, тем не менее, ни одно из других решений не сделает то, что вы описали. Javascript один является единственным, который работает правильно на данный момент.
Трэвис

5
Что
делать,

4
Я имею в виду ... почему мы не используем calc в 2013 году?
kamii

4
высота: calc (100vh - 400px); это правильный стиль CSS, который делает именно то, о чем этот пост. Все остальные решения основаны на фиксированной родительской высоте или отображении блока.
WilliamX

167

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


74
Есть только одна проблема: верхний и нижний колонтитулы не имеют автоматического размера. То есть реальная трудность, и что почему «это не возможно» ответ в настоящее время в верхней части ...
Роман Старков

Мне нужен заголовок размером 55px и div, который заполняет остальную часть высоты документа. это решение!
Матиас Канепа

Вы бомба, я так долго пробовал, и это единственное решение, которое я нашел. Мне нужно, чтобы мой навигационный элемент имел высоту 60 пикселей в верхней части, а оставшийся - 100%, это решило эту проблему.
Адам Уэйт

Это работает хорошо, за исключением того, что у меня небольшая проблема - если я помещаю элемент с display: tableтелом, это, кажется, переполняет тело. Это height: 100%не дает правильной высоты.
GSTAR

4
.colне используется, не так ли?
Slartidan

143

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

3
Я только что указал на технику таблиц CSS . Оказывается, ответ уже был уже в этом ответе на вопрос. Это лучшее решение; чистый, элегантный и использующий именно тот инструмент, который был предназначен. Таблицы CSS
Ян Бойд

Код скрипты не совсем соответствует ответу здесь. Добавление html, body { height: 100%, width: 100% }показалось критическим в моих тестах.
mlibby

8
Раздражающие особенности таблиц CSS точно такие же, как и в обычных таблицах: если содержимое слишком велико, они расширяют ячейку, чтобы соответствовать. Это означает, что вам все равно может понадобиться ограничить размер (max-height) или установить высоту из кода, если страница динамическая. Я очень скучаю по сеткам Silverlight! :(
ушел кодирование

3
Вы всегда можете добавить абсолютно позиционированный контейнер внутри элемента строки таблицы, а затем установить его ширину и высоту на 100%. Не забудьте также установить относительное положение в элементе строки таблицы.
Майк Меллор

1
@MikeMellor не работает в IE11, хотя, поскольку он, похоже, игнорирует relativeпозиционирование table-rowэлемента, он принимает высоту первого позиционного асцендента, который не является элементом таблицы.
dwelle

96

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

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

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

демонстрация

Предполагается разметка и ваш 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;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

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

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


13
ОП сказал, что заголовок может быть произвольной высоты. Поэтому, если вы заранее не знаете высоту, вы не сможете использовать calc :(
Danield

1
@Danield Вот почему я упомянул фиксированную высоту :)
Mr. Alien

3
Это решение, которое работало для меня и не требовало от меня перепроектирования моих существующих страниц вокруг флексбоксов. Если вы используете LESS, то есть Bootstrap, обязательно прочитайте статью о том, как выйти из функции calc (), чтобы LESS не справился с ней.
Jlyonsmith

1
Оп сказал: «Это может быть произвольная высота». Произвольные средства решаются дизайнером, поэтому фиксируются. Это решение, безусловно, лучшее.
Джек

57

Используемый: 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>


1
На мой взгляд самое чистое решение. Конечно, это лучше, чем добавлять javascript. (но ответ уже был опубликован в 2015 году кем-то другим)
bvdb

это чувствует себя намного чище.
theprogrammer

45

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


4
Это лучший ответ наверняка. Работает как очарование для домашних страниц hero-img или комбо героя-img с вашей панелью навигации
noobcoderiam

jsfiddle.net/31ng75du/5 Протестировано с Chrome, FF, Edge, Vivaldi
user2360831

Это просто и лучше.
Дев Ананд

38

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

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

body {
  padding: 0;
  margin: 0;
}

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

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

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


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

@LarryBud вы правы, это делает div обертки, поэтому все должно идти внутри этого div ...
Alireza

34

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

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

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


4
Это не работает, если вы не знаете высоту других элементов (например, если они содержат переменное количество дочерних элементов).
Эге Эрсоз

Вы также можете использовать 100vh, любой, кто делает это: обязательно ставьте пробелы между минусом и элементами
htafoya

28

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


2
Вау, никогда не слышал vhи о vwединицах раньше. Больше информации: snook.ca/archives/html_and_css/vm-vh-units
Стив Беннетт

К сожалению, это не поддерживает IE8 :(
Скотт

2
Я попробовал этот подход, но height: 100%on #contentзаставил его высоту соответствовать высоте #page, игнорируя #tdcontentвысоту вообще. С большим количеством контента полоса прокрутки выходит за пределы нижней части страницы.
Брэндон

28

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

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

JSFiddle предварительный просмотр


Спасибо!!! Я попробовал все ответы, не относящиеся к таблицам, не относящиеся к флексбоксу, и это единственный, который работал на 100% правильно. Один вопрос: в оригинальном источнике есть только один body-content-wrapper, и кажется, что все работает без двойной оболочки (без всяких table-cells). Есть ли проблема с этим?
Брэндон

1
@BrandonMintern Если у вас нет ячеек таблицы, это не работает в IE8 и IE9. (См. Комментарий в оригинальной статье.)
Джон Курлак

Да, ячейки также требуются в IE10. К сожалению, в IE10 и ниже .bodyвысота в конечном итоге будет такой же, как и на .container. Вертикальная полоса прокрутки все еще находится в нужном месте, но в .containerитоге она растягивается больше, чем мы хотим. Когда это полноэкранный режим, нижняя часть экрана .bodyнаходится за нижним краем экрана.
Брэндон

Спасибо, @JohnKurlak. Это единственное решение, которое сработало в моей ситуации (путь flexbox был заблокирован ошибочным поведением в конкретной версии Chrome, используемой моим клиентом)
Максим Демидас

Святой ****! Я так долго искал этот ответ! Огромное спасибо. Flexbox здесь не сработал, но ящики для таблиц действительно работали. Удивительно.
Aabbccsmith

25

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

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


22

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

padding-bottom: 100%;

14
100% чего? Если я попробую это, я получу огромное пустое пространство, и начнется прокрутка.
mlibby

100% от размера области просмотра может быть @mlibby. Если вы установите html и body на 100% высоты, то div может перейти на 100%. Только с одним div, 100% будет относительно содержания div. Я не пробовал это с вложенным div.
Джесс

1
Это означает 100% высоты элемента (добавляется как заполнение элемента), что делает его удвоенной высотой. Нет уверенности, что он заполнит страницу, и определенно не ответ на вопрос. Как уже отмечалось, он может заполнять больше, чем окно просмотра.
Мартин

2
padding-bottom: 100% устанавливает высоту + 100% ширины
Romeno

1
from w3school: задает нижний отступ в процентах от ширины элемента. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa

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


main {height: 10px; flex: 1; переполнение: авто}
Наим Багхи

2
Потратив часы и испытав несколько подходов, этот был лучшим! Это сжато, просто и умно.
marciowb

19

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

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

div {
    height: 100vh;
}

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


14
Но 100vh звучит как вся высота, а не остальная высота. Что делать, если у вас есть заголовок, а вы, то вы хотите, чтобы заполнить все остальное
Epirocks

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


Близко! Почти то, что я хочу, за исключением того, что я собираюсь поместить другие вещи в div... то есть top: 0;поместит что-то прямо под заголовком. Я снова изменю свой вопрос, потому что вы ответили на него отлично, и все же не то, что я хочу! Я просто спрячу переполнение, так как содержимое должно соответствовать.
Винсент Макнабб

-1: Этот ответ создает div, называемый контентом, который покрывает весь экран, а не остальную часть экрана
Casebash

11

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

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

15
Что если вы не знаете высоту заголовка?
Югаль Джиндл

11

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

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

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

Обновление до 2020 года : все современные браузеры поддерживают как display: flexи display: grid. Единственное, чего не хватает, так это поддержки, subgridподдерживаемой только Firefox. Обратите внимание, что MSIE не поддерживает ни спецификацию, но, если вы хотите добавить специфичные для MSIE хаки CSS, это можно сделать так, чтобы они себя вели. Я бы предложил просто игнорировать MSIE, потому что даже Microsoft говорит, что его больше нельзя использовать.


10

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


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

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


Дело в том, что если пользователь использует большой экран для просмотра этой страницы, а высота вашего заголовка составляет ровно 100 пикселей, что меньше 40% от текущей высоты, между вашим заголовком и контекстом тела будет большой пробел.
Саорикидо

8

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

2
Хороший ответ, за который я проголосовал, но, к сожалению, он не работает с IE8, который еще долго будет существовать.
Винсент Макнабб

Такие приложения, как Gmail, используют Javascript для определения размера, что в любом случае является лучшим решением, чем CSS в большинстве случаев.
Винсент МакНабб

Я думаю, что они используют Javascript, потому что нет другого хорошего кросс-браузерного CSS-решения, а не потому, что оно лучше.
Грег

1
@VincentMcNabb Работает в IE8 w3schools.com/cssref/pr_class_display.asp . Просто требуется! DOCTYPE декларация. Никогда даже не знал о табличном значении для атрибута отображения. Классное решение. +1
Говинд Рай

8
 style="height:100vh"

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


6

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

Уже думал об этом. Но это тоже не работает. Я просто собираюсь придерживаться, tableпотому что это работает. Спасибо за обновление, хотя.
Винсент Макнабб

5

Попробуй это

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

4

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


4

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

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

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

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

4

Для мобильного приложения я использую только 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
Это не правильное решение. Vh несовместим в мобильных браузерах. Для получения более подробной информации смотрите здесь: stackoverflow.com/questions/37112218/…
HarshMarshmallow

3

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

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

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


3

В Bootstrap:

Стили CSS:

html, body {
    height: 100%;
}

1) Просто заполните высоту оставшегося места на экране:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [введите описание изображения здесь


2) Заполните высоту оставшегося экранного пространства и выровняйте содержимое по центру родительского элемента:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [введите описание изображения здесь


1

Это моя собственная минимальная версия решения Pebbl. Потребовалось навсегда, чтобы найти способ заставить его работать в IE11. (Также протестировано в Chrome, Firefox, Edge и Safari.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.