Почему процентная высота не работает над моим div?

У меня есть два div с высотой 90%, но дисплей отличается.

Я попытался поместить внешний div, но это не помогло. Кроме того, он работает на FF, Chrome, Opera и Safari.

Может кто-нибудь объяснить, почему у меня такая проблема?

Ниже мой код:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
    </div>

ОТВЕТЫ

Ответ 1

Используйте vh (высота видового экрана) вместо процента. Он будет получать высоту браузера и соответственно его размер, например.

height:90vh;

попробуйте этот код

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
    <div id="tabs" ng-controller="TabsDataCtrl">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers"></leaflet>
    </div>
    </div>
</body>
</html>

с css

<style>
    #wrapper{height:60vh;}
    #tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
    #leaflet-map{width:78%; height:60vh; overflow-y:scroll;  overflow-x:hidden;}
</style>

Ответ 2

Работа со значением height CSS и процентными значениями

Свойство height CSS при использовании с процентным значением вычисляется относительно элемента, содержащего блок.

Пусть говорят, что ваш элемент body имеет height: 1000px. Тогда ребенок с height: 90% получит 900px.

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

Из спецификации:

10.5 Высота содержимого: свойство height

процент
Определяет процентную высоту. Процент вычисляется относительно высоты блока, содержащего сгенерированный блок. Если высота содержащего блока явно не указана, и этот элемент не является абсолютно позиционированным, значение вычисляется как "auto".

авто
Высота зависит от значений других свойств.

Следовательно, если вы хотите использовать процентные высоты в своих div, укажите высоту всех родительских элементов, вплоть до корневого элемента и включая его (например, html, body {height:100%;})

Обратите внимание, что min-height и max-height неприемлемы. Это должно быть свойство height.

Вот небольшое резюме:

Джон: Я хочу установить высоту моего div на 100%.
Джейн: 100% чего?
Джон: 100% его контейнера. Итак, родительский одноуровневый вверх.
Джейн: Хорошо. И какова высота родителя div?
Джон: У него нет. Авто, я думаю. Content-привод.
Джейн: Итак, вы хотите, чтобы у div была 100% -ная высота неизвестной переменной?
Джон: [тишина]
Джейн: Эй, Джон, могу ли я получить 50% от этого?
Джон: 50% чего?
Джейн: Именно!
Джейн: Проценты - относительные значения. Вы всегда должны спрашивать "процент от чего?". Объявляя явную высоту для каждого родителя, вплоть до body и html вы устанавливаете систему отсчета для каждого ребенка с процентной высотой, позволяя высоте работать.

Примеры

Скажем, вы хотите, чтобы div имел 50% высоты своего родителя.

Это не сработает:

<article>
    <section>
        <div style="height:50%"></div>
    </section>
</article>

Также это не будет:

<article>
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

И это не будет:

<article style="height:100%">
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

Это тоже не удастся:

<body style="height:100%">
    <article style="height:100%">
        <section style="height:100%">
            <div style="height:50%"></div>
        </section>
    </article>
</body>

ТЕПЕРЬ, он, наконец, будет работать:

<html style="height:100%">
    <body style="height:100%">
        <article style="height:100%">
            <section style="height:100%">
                <div style="height:50%"></div>
            </section>
        </article>
    </body>
 </html>

И это тоже сработает:

<article>
    <section style="height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

Но не это:

<article>
    <section style="min-height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

образец кода

Использовать 100vh

Как вы можете видеть, процентные высоты немного сложны. Вы можете избежать сложностей (т.е. Никогда не учитывать родительские элементы), просто используя высоту процента просмотра. Всякий раз, когда вы хотите, чтобы ящик был высотой области просмотра, используйте height: 100vh вместо height: 100%. Больше ничего не нужно.

Исключение абсолютного позиционирования

Как отмечено в спецификации, абсолютно позиционированный элемент является исключением из правила для высоты в процентах. Подробнее здесь: Применение высоты 100% к вложенным, негибким элементам.