Относительная высота div

Question

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

То, что я пытался это (без заголовка):

<div id="wrap"> 
    <div id="block12"> 
     <div id="block1"></div> 
     <div id="block2"></div> 
     <div class="clear"></div> 
    </div> 
    <div id="block3"></div> 
</div> 

И CSS:

#wrap { 
    width: 100%; 
    height: 100%; 
} 

#block12 { 
    width: 100%; 
    max-height: 49%; 
} 

    #block1, #block2 { 
     width: 50%; 
     height: 100%; 
     float: left; 
     overflow-y: scroll; 
    } 


#block3 { 
    width: 100%; 
    height: 49%; 
    overflow: auto; 
    /*background: blue;*/ 
} 

.clear { clear: both; } 

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

Answer 1

добавить это вам CSS:

html, body 
{ 
    height: 100%; 
} 

working Fiddle

когда вы говорите wrap быть 100%, 100% чего? его родителя (тела), поэтому его родитель должен иметь некоторую высоту.

а также для body, его родителем является его html. html родительский его вид. поэтому, установив их на 100%, wrap также может иметь процентную высоту.

также: Элементы имеют по умолчанию заполнение/край, что заставляет их охватывать немного больше, чем высота, которую вы применили к ним. (В результате чего полоса прокрутки) вы можете использовать

* 
{ 
    padding: 0; 
    margin: 0; 
} 

отключить это.

Посмотрите на That Fiddle

Answer 2

Доля в ширину работ, но процент по высоте не будет работать, если вы не указали конкретную высоту для любого родителя в зависимой петле ...

Смотреть это: percentage in height doesn’t work?

Answer 3

добавить к вашей CSS:

html, body{height: 100%} 

и изменить максимальную-heig ХТ из #block12 в height

Объяснение:

В основном #wrap было 100 Высота% (относительный показатель), но при использовании относительных мер, которые он ищет меру своего родительского элемента, и это обычно не определено, потому что это также относительна. Единственный элемент (ы), который может использовать относительную высоту, равен body или или html в зависимости от браузера, остальным элементам необходим родительский элемент с абсолютной высотой.

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

Answer 4

Дед принимает высоту своего родителя, но поскольку он не имеет содержимого (expecpt для ваших div), он будет только по высоте, как его содержимое.

Вы должны установить высоту тела и HTML:

HTML:

<div class="block12"> 
    <div class="block1">1</div> 
    <div class="block2">2</div> 
</div> 
<div class="block3">3</div> 

CSS:

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.block12 { 
    width: 100%; 
    height: 50%; 
    background: yellow; 
    overflow: auto; 
} 
.block1, .block2 { 
    width: 50%; 
    height: 100%; 
    display: inline-block; 
    margin-right: -4px; 
    background: lightgreen; 
} 
.block2 { background: lightgray } 
.block3 { 
    width: 100%; 
    height: 50%; 
    background: lightblue; 
} 

И JSFiddle

Answer 5

В основном, проблема заключается в блоке 12. для блока 1/2, чтобы взять общую высоту блока 12, он должен иметь определенную высоту. This stack overflow post объясняет, что в действительно хороших деталях.

Поэтому установка определенной высоты для блока 12 позволит вам установить правильную высоту. Я создал an example on JSfiddle, который покажет вам, что блоки могут быть размещены рядом друг с другом, если бит block12 установлен на стандартную высоту на странице.

Вот пример, включающий заголовок и блок3 div с некоторым контентом для примеров.

#header{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:20%; 
    } 

    #block12{ 
    position:absolute; 
    top:20%; 
    width:100%; 
    left:0; 
    height:40%; 
    } 
    #block1,#block2{ 
    float:left; 
    overflow-y: scroll; 
    text-align:center; 
    color:red; 
    width:50%; 
    height:100%; 

    } 
#clear{clear:both;} 
#block3{ 
    position:absolute; 
    bottom:0; 
    color:blue; 
    height:40%; 

    } 

Answer 6

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

height: auto; 

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

Кроме того, используя решение JavaScript вы можете использовать этот смертельный легкий метод таблицы:

#parent3 { 
    display: table; 
    width: 100%; 
} 

#parent3 .between { 
    display: table-row; 
} 

#parent3 .child { 
    display: table-cell; 
} 

Предварительный просмотр на http://jsbin.com/IkEqAfi/1

• Пример 1: Не работает
• Пример 2: Фикс высота
• Пример 3: Метод таблицы

Но: Уточните, что метод таблицы работает только во всех современных браузерах и Internet Explorer 8 и выше. В качестве Fallback вы можете использовать JavaScript.