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

Заполнить оставшееся вертикальное пространство - только CSS

Мне нужно заполнить оставшееся вертикальное пространство #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;
}
4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете сделать это с помощью position:absolute; в div #second следующим образом:

FIDDLE

CSS:

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT: альтернативное решение

В зависимости от вашего макета и содержимого, содержащегося в этих div, вы можете сделать его намного проще и с меньшей разметкой:

FIDDLE

HTML:

<div id="wrapper">
    <div id="first"></div>
</div>

CSS:

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}

Ответ 2

Вы можете использовать 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, */
}

Пример jsfiddle

Если вы хотите иметь полную поддержку старых браузеров, таких как IE9 или ниже, вам придется использовать полисы, такие как flexy, поддержка polyfill для поддержки Flexbox, но только для модели 2012 года Flexbox.

Недавно я нашел еще один polyfill, чтобы помочь вам с Internet Explorer 8 и 9 или любым более старым браузером, который не поддерживает модель Flexbox, я все еще не пробовал, но я оставляю ссылку здесь

Вы можете найти полезное и полное руководство по Flexbox модели от Chris Coyer здесь

Ответ 3

Если вы можете добавить дополнительную пару 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;
}

Пример

Ответ 4

Flexbox решение

Примечание. Добавьте префиксы 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>

Ответ 5

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

<div id="wrapper">
    <div id="first">
        Here comes the first content
        <div id="second">I will render below the first content</div>
    </div>
</div>

Демо

Ответ 6

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

Fiddler

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

Ответ 7

Вы пытались изменить высоту обертки на vh вместо%?

#wrapper {
width:300px;
height:100vh;
}

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

Ответ 8

Вы можете просто добавить опцию переполнение: авто:

#second
{
   width:300px;
   height:100%;
   overflow: auto;
   background-color:#9ACD32;
}

Ответ 9

вам нужны 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