Div со 100% высотой переполняющего тела в Chrome

Я пытаюсь сделать ребенка на 100% ростом, как описано здесь и здесь. В Firefox и IE он показывается, как и ожидалось, но в Chrome все перепутано. Дивы выходят из тела. Это еще один побочный эффект хрома после спецификации на тройник или все еще ошибка?

Код:

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        border: 1px solid black;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .red-border {
        border: 2px solid red;
    }

    .blue-border {
        border: 2px solid blue;
    }

    .green-border {
        border: 2px solid green;
    }
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <div  style="flex: 0 1 auto; ">top</content></div>

    <div class="green-border"  style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
        <div style="flex: 0 1 auto; ">left</div>
        <div style="flex: 1 1 auto; width: 100%; height: 100%;">
            <div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
        </div>
        <div style="flex: 0 1 auto; ">right</div>
    </div>

    <div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>

plnkr: http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/

вот как это выглядит в ff и ie (11): вот так это выглядит в фф

вот так это выглядит в чуме: вот так это выглядит в чуме

ОБНОВЛЕНИЕ: div 'center' должен быть негибким div и при этом иметь высоту 100%. Причина заключается в том, что не-flex div состоит в том, что моя реальная структура сайта довольно сложна - она ​​использует много веб-компонентов, а некоторые из них просто не могут использовать flex. Поэтому в какой-то момент я должен прекратить использовать flex и иметь "нормальный" div, чтобы иметь высоту 100%.

Источник

2 ответа

Решение

Кажется, проблема связана с тем, что вы объединяете height а также flex-basis свойства в том же блоке объявления. Похоже, создать конфликт. В моем ответе ниже я удалил высоты и использовал flex-basis вместо. Вы также отметите несколько других настроек.

Изменить:

(1)

<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >

К

<div class="green-border" style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >

примечания: удалено height ; используемый flex-basis вместо;

(2)

<div style="flex: 1 1 auto; width: 100%; height: 100%;">

К

<div style="flex: 1 1 100%; width: 100%; display: flex;">

примечания: удалено height ; используемый flex-basis вместо; установлен вложенный гибкий контейнер;

(3)

<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>

К

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

примечания: удалено height ; используемый flex-basis вместо; добавленной flex имущество;

Наконец, синяя рамка не появилась из-за опечатки.

(4)

clsas="blue-border"

К

class="blue-border"

С учетом приведенных выше настроек макет отображается в Chrome следующим образом:

Все коробки лежат в своих контейнерах.

DEMO

Применение 100% высоты к вложенным негибким элементам

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

html, body { height: 100%; }

Я объяснил причину этого здесь:

Но при внимательном рассмотрении спецификации обнаруживается исключение:

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

Обратите внимание на часть: ... и элемент не является абсолютно позиционированным.

Следовательно, попробуйте это на "центре" поле:

Изменить:

(5)

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

К

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
    <div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
       center</div>
</div>

Заметки:

  • добавленной position: relative установить ближайшего предка для абсолютного позиционирования
  • создал новый, вложенный, негибкий div контейнер
  • применяется абсолютное позиционирование к новому div с height: 100%,

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

DEMO

Источник

Проблема в том, что ваша граница делает div больше, чем на 100%, вызывая его выскакивание. Попробуйте сделать так, чтобы ваш ребенок делился меньше, чем на 100%, например на 99%. Это должно решить вашу проблему.

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