Подтвердить что ты не робот

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

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

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

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

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 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;
}
<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>
4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте изменить свой css на это:

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

Ответ 2

Трюк о высоте: 100% заключается в том, что он требует, чтобы все родительские контейнеры также устанавливали свои высоты. Здесь пример html

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

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

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

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

Ответ 3

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

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

В принципе, вам нужно - установите целевой контейнер на высоту 100%, которую вы, кажется, уже знаете - родительский контейнер, который вы установили для отображения: flex и flex-direction: vertical (вы увидите в JSFiddle, я также включил альтернативные стили, которые делают то же самое, но необходимы для поддержки кросс-браузера) - вы можете позволить верхнему и нижнему колонтитулу быть их естественными высотами и не должны указывать что-либо в этом отношении - в контейнере вы хотите заполнить оставшееся пространство, установите 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. Он отлично работает, за исключением того, что переполненный контент не работает так, как вы ожидали бы, но переполненный контент просто расширяет контейнер до размера содержимого, что, я уверен, не то, что вы хотите. Наслаждайтесь!

Ответ 4

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

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

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

где #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 здесь.

Ответ 5

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

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

Ответ 6

Высота 100% не превышает 100%. Вы не можете решить это так. Аналогично, используя сочетание высоты + margin + padding. Это путь прямо к черту. Я предлагаю вам взглянуть на учебные пособия, которые используют этот макет страницы.