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

1475

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

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

  • 26
    Для любого, кто споткнется здесь в будущем, вы можете получить желаемую разметку таблицы в большинстве браузеров, без разметки таблицы, используя display:table и связанные свойства, см. Этот ответ на очень похожий вопрос.
  • 3
    Я пытался восстановить ваши настройки - jsfiddle.net/ceELs - но это не работает, что я пропустил?
Показать ещё 5 комментариев
Теги:
html-table
flexbox

31 ответ

835
Лучший ответ
Обновление

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>

В CSS выше свойство flex сокращает flex-grow, flex-shrink и flex-basis, чтобы установить гибкость элементов flex. Mozilla имеет хорошее введение в модель гибких ящиков.

Поделиться
  • 8
    Почему flex: 0 1 30px; атрибут в box .row как это переопределить в каждом div?
  • 8
    Вот поддержка браузера для flexbox - приятно видеть все это зеленым - caniuse.com/#feat=flexbox
Показать ещё 16 комментариев
222

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

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

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

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

Поделиться
  • 2
    Это то, что я подозревал. Тем не менее, приложение также будет работать с отключенным Javascript, поэтому я думаю, что я просто буду продолжать использовать таблицу.
  • 6
    Винсент, держи себя в руках. Я хотел сделать то же самое, и это кажется невозможным с CSS? Я не уверен, но, тем не менее, ни одно из других решений не сделает то, что вы описали. Javascript один является единственным, который работает правильно на данный момент.
Показать ещё 11 комментариев
152

Оригинальный пост более 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>
Поделиться
  • 70
    Есть только одна проблема: верхний и нижний колонтитулы не имеют автоматического размера. То есть реальная трудность, и именно поэтому «это невозможно» ответ в настоящее время в верхней части ...
  • 0
    Мне нужен заголовок размером 55px и div, который заполняет остальную часть высоты документа. это решение!
Показать ещё 4 комментария
141

Вместо использования таблиц в разметке вы можете использовать таблицы 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 таблицы
  • 0
    Код скрипты не совсем соответствует ответу здесь. Добавление html, body { height: 100%, width: 100% } казалось критическим в моих тестах.
Показать ещё 5 комментариев
84

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

Поделиться
  • 12
    ОП сказал, что заголовок может быть произвольной высоты. Так что, если вы не знаете высоту заранее, вы не сможете использовать calc :(
  • 1
    @Danield Вот почему я упомянул фиксированную высоту :)
Показать ещё 2 комментария
44

Б: 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>
Поделиться
  • 0
    На мой взгляд самое чистое решение. Конечно, это лучше, чем добавлять javascript. (но ответ уже был опубликован в 2015 году кем-то другим)
29

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

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

body {
  padding: 0;
  margin: 0;
}

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

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

Изображение 2590

Поделиться
  • 2
    Это хорошо, только если вы хотите, чтобы div занимал всю высоту окна. Теперь поместите заголовок div над ним с неизвестной высотой.
  • 0
    @LarryBud Вы правы, это делает div-оболочку, поэтому все должно идти внутри этого div ...
27

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

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

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

Поделиться
  • 0
    Это не работает, если вы не знаете высоту других элементов (например, если они содержат переменное количество дочерних элементов).
  • 0
    Вы также можете использовать 100vh, любой, кто делает это: обязательно ставьте пробелы между минусом и элементами
25

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

Поделиться
  • 0
    Спасибо!!! Я попробовал все ответы, не относящиеся к таблицам, не относящиеся к флексбоксу, и это единственный, который работал на 100% правильно. Один вопрос: в исходном коде есть только body-content-wrapper , и кажется, что все работает без двойной оболочки (без каких table-cell либо table-cell ). Есть ли проблема с этим?
  • 1
    @BrandonMintern Если у вас нет ячеек таблицы, это не работает в IE8 и IE9. (См. Комментарий в оригинальной статье.)
Показать ещё 1 комментарий
25

Это можно сделать только с помощью 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
  • 0
    К сожалению, это не поддерживает IE8 :(
Показать ещё 1 комментарий
21

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

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

Поделиться
20

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

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

html, body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

Пример Codepen

Альтернативное решение с div, сосредоточенным в пределах содержимого div

Поделиться
19

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

padding-bottom: 100%;
Поделиться
  • 13
    100% чего? Если я попробую это, я получу огромное пустое пространство, и начнется прокрутка.
  • 0
    100% размера окна просмотра может быть @mlibby. Если вы установите html и body на 100% высоты, то div может перейти на 100%. Только с одним div, 100% будет относительно содержания div. Я не пробовал это с вложенным div.
Показать ещё 3 комментария
13

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

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

Поделиться
  • 0
    main {height: 10px; flex: 1; переполнение: авто}
12 
<!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 (у которых всегда есть видимая панель прокрутки, но отключена), но без нее содержимое будет зажиматься, если оно переполняется.

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

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

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

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

Поделиться
10

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

Так как легко сделать контент 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%;
}
Поделиться
  • 13
    Что делать, если вы не знаете высоту заголовка?
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 (в этом порядке) высоту, а затем просто придавайте вашим элементам высоту?

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

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

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

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

div {
    height: 100vh;
}

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

Поделиться
  • 6
    Но 100vh звучит как вся высота, а не остальная высота. Что делать, если у вас есть заголовок, а затем вы хотите заполнить остальные
5 
 style="height:100vh"

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

Поделиться
5

Решение сетки 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>

Полное руководство по сетям @CSS-Tricks.com

Поделиться
5

Фактически вы можете использовать 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, который еще долго будет существовать.
  • 0
    Такие приложения, как Gmail, используют Javascript для определения размера, что в любом случае является лучшим решением, чем CSS в большинстве случаев.
Показать ещё 2 комментария
5

Винсент, я снова отвечу, используя ваши новые требования. Поскольку вы не заботитесь о скрытии содержимого, если он слишком длинный, вам не нужно плавать заголовок. Просто поместите переполнение, скрытое в тегах 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>
Поделиться
  • 0
    Уже думал об этом. Но это тоже не работает. Я просто собираюсь придерживаться table потому что она работает. Спасибо за обновление, хотя.
4

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

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Поделиться
3

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

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

Поделиться
2

У меня была такая же проблема, но я не мог решить проблему с помощью 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>
Поделиться
1

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

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

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

Поделиться
0

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

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

https://github.com/cssobj/cssobj

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

Поделиться
-2

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

Если единственной проблемой является высота, просто работает использование divs:

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

В простом тесте ширина заголовка/содержимого отличается от вашего примера и моего, но я не уверен в вашем сообщении, если вы обеспокоены шириной?

Поделиться
  • 2
    Это не совсем то, что я хочу сделать. Я хочу, чтобы div содержимого заполнил оставшуюся часть экрана, а не чтобы он был такой же высоты, как экран.
  • 1
    Это похоже на то, что делает мой пример, по крайней мере, когда я пытаюсь это сделать. Разве вы не видите такое поведение?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню