Почему 100% не означает 100% роста? - PullRequest
Новая
       13

Почему 100% не означает 100% роста?

10 голосов
/ 24 октября 2011

Я пытаюсь увеличить divs с, чтобы заполнить экран, но я изо всех сил. Я разбил проблему на этот jsfiddle .

Что я действительно хочу знать, так это почему div с его 100% min-height не расширяется до этой высоты (или вообще), когда его родитель имеет тот же атрибут и расширяется? 

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

Ответы [ 6 ]

17 голосов
/ 25 октября 2011

Эта проблема описана в спецификации CSS 2.1 :

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

Итак, для пояснения, процентная высота будет ссылаться на высоту содержащего его блока (если это не position: absolute или position: fixed).Если этот содержащий блок не имеет заданной высоты, то процент будет относиться к auto, и он не будет на самом деле много.

position: absolute меняет ссылочный содержащий блок на ближайший позиционированный (*Элемент 1020 *, relative или fixed).

position: fixed заменяет содержащий блок, на который есть ссылка, на область просмотра.

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

Пожалуйста, посмотрите мою демонстрацию на jsFiddle

11 голосов
/ 24 октября 2011

Вам также необходимо установить высоту html, чтобы 100% ссылался на высоту области просмотра вместо высоты документа ( demo ): 

html,body {
    height: 100%;
    background: red;
    padding: 0;
}
div {
    height: 100%;
    background: grey;
}
6 голосов
/ 25 октября 2011

потому что вы не можете использовать 100% высоту статического элемента. Изменение атрибута позиции со статического на абсолютный даст вам 100% высоты. демо

опубликовано как ответ на запрос заказа на поставку.

0 голосов
/ 06 апреля 2018

Это будет работать 

   body, html {
      height: 100vh;
    }

    aside {
      background: green;
      width: 200px;
      height: 100vh;
    }
0 голосов
/ 24 октября 2011

Есть две проблемы, вы также захотите указать высоту html, например: 

html, body {
    min-height: 100%;
}

Также есть проблема в IE, где min-height несделать трюк для div, но указание высоты на div делает свое дело.Как таковой: 

html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}
0 голосов
/ 24 октября 2011

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

В этой статье подробно рассматриваются проблема и решение:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Это также может помочь: 

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id="outer"> 
    <div id="inner"></div> 
    text 
</div>

Подробнее см. Здесьподробности на выше: Как сделать плавающий div на 100% высоты его родителя?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...