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

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

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

Я попробовал (без заголовка):

#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;
}

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

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

Ответы

Ответ 1

Добавьте это к вам CSS:

html, body
{
    height: 100%;
}

рабочий скрипт

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

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

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

*
{
    padding: 0;
    margin: 0;
}

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

Посмотрите Эта скрипта

Ответ 2

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

height: auto;

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

Помимо использования 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.

Ответ 3

добавьте это в свой css:

html, body{height: 100%}

и измените максимальную высоту #block12 на height

Объяснение

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

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

Ответ 4

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

Смотрите это: процент в высоте не работает?

Ответ 5

div принимает высоту своего родителя, но поскольку он не имеет содержимого (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

Ответ 6

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

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

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

#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%;

    }