Мне нужно заполнить оставшееся вертикальное пространство #wrapper под #first с помощью #second div.
Мне нужно только решение CSS.
HTML:
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
CSS:
#wrapper
{
width:300px;
height:100%;
}
#first
{
width:300px;
height:200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
height:100%; //<-----This should fill the remaining space
background-color:#9ACD32;
}
Вы можете сделать это с помощью position:absolute; в div #second следующим образом:
CSS:
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT: альтернативное решение
В зависимости от вашего макета и содержимого, содержащегося в этих div, вы можете сделать его намного проще и с меньшей разметкой:
HTML:
<div id="wrapper">
<div id="first"></div>
</div>
CSS:
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
Вы можете использовать CSS Flexbox вместо другого отображаемого значения. Модуль Flexbox Layout (Flexible Box) нацелен на предоставление более эффективного способа выкладки, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и/или динамичен.
Пример
/* CONTAINER */
#wrapper
{
width:300px;
height:300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* SOME ITEM CHILD ELEMENTS */
#first
{
width:300px;
height: 200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
background-color: #9ACD32;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, */
}
Если вы хотите иметь полную поддержку старых браузеров, таких как IE9 или ниже, вам придется использовать полисы, такие как flexy, поддержка polyfill для поддержки Flexbox, но только для модели 2012 года Flexbox.
Недавно я нашел еще один polyfill, чтобы помочь вам с Internet Explorer 8 и 9 или любым более старым браузером, который не поддерживает модель Flexbox, я все еще не пробовал, но я оставляю ссылку здесь
Вы можете найти полезное и полное руководство по Flexbox модели от Chris Coyer здесь
Если вы можете добавить дополнительную пару div, чтобы ваш html выглядел так:
<div id="wrapper">
<div id="first" class="row">
<div class="cell"></div>
</div>
<div id="second" class="row">
<div class="cell"></div>
</div>
</div>
Вы можете использовать свойства display:table:
#wrapper
{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
#first .cell
{
height:200px;
background-color:#F5DEB3;
}
#second .cell
{
background-color:#9ACD32;
}
Примечание. Добавьте префиксы flex flex, если это требуется вашим поддерживаемым браузерам.
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
}
.first {
height: 50px;
}
.second {
flex-grow: 1;
}<div class="wrapper">
<div class="first" style="background:#b2efd8">First</div>
<div class="second" style="background:#80c7cd">Second</div>
</div>Все, что вам нужно, - это немного улучшенная разметка. Заверните вторую в первой и она будет отображаться под.
<div id="wrapper">
<div id="first">
Here comes the first content
<div id="second">I will render below the first content</div>
</div>
</div>
Если вы не хотите иметь высоты исправления для вашего основного контейнера (сверху, снизу,....), вы можете просто использовать это css -file, чтобы получить гибкий контейнер, который использует оставшееся пространство, включая. за работой!!! скроллбары
<!DOCTYPE html>
<html >
<head>
<title>Flex Container</title>
<link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">
<style>
.cont{
background-color: blue;
position: absolute;
height: 100%;
width: 100%;
}
.headerContainer {
background-color: green;
height: 100px;
width: 100%;
}
.mainContainer {
background-color: white;
width: 100%;
overflow: scroll
}
.footerContainer {
background-color: gray;
height: 100px;
width: 100%;
}
</style>
</head>
<body class="qx-flex-ready" style="height: 100%">
<div class="qx-vbox cont">
<div class="headerContainer">Cell 1: flex1</div>
<div class="mainContainer qx-flex3">
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
</div>
<div class="footerContainer" >Cell 3: flex1</div>
</div>
</body>
</html>
Вы пытались изменить высоту обертки на vh вместо%?
#wrapper {
width:300px;
height:100vh;
}
Это отлично подойдет для меня, когда я хотел бы заполнить мою страницу градиентным фоном, например...
Вы можете просто добавить опцию переполнение: авто:
#second
{
width:300px;
height:100%;
overflow: auto;
background-color:#9ACD32;
}
вам нужны javascript и некоторые расчеты на стороне клиента: http://jsfiddle.net/omegaiori/NERE8/2/
вам понадобится jquery для эффективного достижения желаемого. эта функция очень проста, но очень эффективна:
(function () {
var heights = $("#wrapper").outerHeight(true);
var outerHeights = $("#first").outerHeight(true);
jQuery('#second').css('height', (heights - outerHeights) + "px");
})();
сначала он определяет высоту обертки, так как она настроена на 100% каждый раз каждый раз (это зависит от того, на каком экране вы приземляетесь).
на втором шаге он дает div #second соответствующую высоту, вычитая из высоты обертки высоту div #first. результатом является доступная высота, оставшаяся в обертке div