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

У меня два деления с высотой 90%, но дисплей другой.

Я пытался создать внешний div вокруг них, но это не помогло. Кроме того, то же самое относится к Firefox, 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>
Источник

2 ответа

Решение

Использование 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>
Источник

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

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

Скажем ваш 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% высоты к вложенным негибким элементам.

Источник
Другие вопросы по тегам