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