Div Expand для визуального заполнения вертикального пространства

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

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

Я пробовал несколько решений, которые включали меня, добавляяheight:100%, height:auto; position:relative но это не сработало.

<code>html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}</code>
<code><div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer></code>

 ccpizza05 мая 2012 г., 20:52
Это может сработать, если вы установитеheight:100% для обоихhtml а такжеbody теги.

Ответы на вопрос(6)

Решение Вопроса

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#content {
  background-color: pink;
  width: 400px;
  padding: 25px 30px 25px 30px;
  position: absolute;
  bottom: 30px;
  top: 150px;
  margin-left: 100px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

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

Вот что вы после, Я думаю

 dotNET23 мар. 2014 г., 05:58
@ sproketboy: Это не правильно. Я только что добавилoverflow-y: scroll; в#content стиль, и он работал нормально.
 sproketboy08 февр. 2013 г., 15:06
Это НЕ РАБОТАЕТ, если содержимое прокручивается.
 Jon05 мая 2012 г., 21:07
Спасибо, Габриэль :) Это именно то, что я ищу.
 Musa05 мая 2012 г., 21:11
@ user1277607 если #content является абсолютным, то обертка не будет расти для размещения содержимого Скрипка

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

 Harmon14 февр. 2014 г., 20:00
Рассказать кому-то это невозможно, и для Google это не очень хороший отве

100% заключается в том, что для всех родительских контейнеров также должны быть заданы их высоты. Вот пример HT

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>

Для того, чтобы div контейнера с высотой, установленной на 100%, динамически расширялся до высоты окна, вам необходимо убедиться, что высоты элементов body и html также установлены на 100%. так..

html
{
    height: 100%;
}
body
{
    height: 100%;
}
#container
{
    height: 100%;
}

даст вам контейнер, который расширяется под ваше окно. затем, если вам нужно иметь нижний колонтитул или заголовок, плавающий над этим окном, вы можете сделать это с помощью z индексации. Это единственное найденное мной решение, которое динамически заполняет вертикальную высоту.

 HelloWorldNoMore26 апр. 2016 г., 21:30
Да, но это вызывает проблемы. Контейнер уровня страницы развернется ниже экрана, и вам придется немного прокрутить по вертикали. Вы можете установить высоту контейнера на <100%. Но есть ли другой способ?
 PALEN06 июл. 2017 г., 19:33
"Хитрость в отношении высоты: 100% заключается в том, что для всех родительских контейнеров также необходимо установить их высоту", - сделал это для мен

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

Предполагая, что у тебя есть три деления:

<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>

where #header фиксирован и может иметь переменную высоту, #contents должен занимать все оставшееся вертикальное пространство, а #footer фиксирован и может иметь переменную высоту, которую вы можете сделать:

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#header {
  flex: none;
}
#contents {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#footer {
  flex: none;
}

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

Вы можете узнать больше о дисплее: flexВо.

 Ivan Nikolchov16 июн. 2016 г., 21:03
люблю это <3 <3 <3 <3 <3 <3
 a coder17 июл. 2015 г., 16:49
jquery css переписывал это XD
 a coder17 июл. 2015 г., 07:21
это не работает, когда вы добавляете класс в контейнер div
 owencm17 июл. 2015 г., 09:17
Можете ли вы уточнить? Я не совсем уверен, что вы имеете в виду - у меня это отлично работает.

пытаясь понять это, и, наконец, нашел надежное решение без хаков. Однако для этого требуется CSS3, для поддержки которого требуется современный браузер. Итак, если это ограничение работает для вас, то у меня есть реальное решение для вас, которое работает.

http: //jsfiddle.net/u9xh4z74 Скопируйте этот код в свой собственный файл, если вам нужны доказательства, так как JSFiddle не будет корректно отображать flexbox как встроенный код.

В основном вам нужно - установить целевой контейнер на 100% высоты, о которой вы, похоже, уже знаете, - родительский контейнер, который вы установили, отображать: flex и flex-direction: вертикальный (вы увидите в JSFiddle, который я также включил альтернативные стили, которые делают то же самое, но необходимы для кросс-браузерной поддержки) - вы можете оставить верхний и нижний колонтитулы их естественными высотами, и вам не нужно ничего указывать в этом отношении - в контейнере, который вы хотите заполнить оставшееся пространство, set flex: 1. Все готово! Вы увидите, что это работает именно так, как вы и планировали. Также в JSFiddle я включил overflow: auto, чтобы продемонстрировать, что если у вас больше текста, чем может обработать экран, прокрутка работает так, как вы этого хотите.

<div style="display:flex; flex-direction:vertical;">
    ...header(s)...
    <div style="flex: 1; overflow: auto;">
         As much content as you want.
    </div>
    ...footer(s)...
</div>

Как примечание, я решил попробовать сделать то же самое, используя display: table. Он также отлично работает, за исключением того, что переполненное содержимое не работает так, как вы ожидаете, вместо этого переполненное содержимое просто расширяет контейнер до размера содержимого, что, я уверен, не то, что вам нужно. Наслаждаться

 André van Schoubroeck16 окт. 2015 г., 16:59
"вертикаль" должна быть "колонна", тогда она работает

таблица и отображение: таблица-строка Установите высоту: 0 для нормальных элементов div и высоту: автоматически для элемента div, который должен заполнять вертикальное пространство. Вставьте div с помощью {height: 100%; overflow-y: auto} в вертикальный заполнитель, если высота контейнеров не должна превышать заданную высоту. Вот сила показа: таблица!

<div style="height:300px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Hello          
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px"></div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Gbai
    </div>
  </div>
</div>

Ваш ответ на вопрос