По какой-то причине min-height не работает в Firefox. Я попытался установить минимальную высоту на теле, но Firefox полностью проигнорировал ее. Поскольку моя страница динамична, я не могу просто установить высоту на 100%. Что мне делать?Firefox игнорирует минимальную высоту в CSS
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
}<body>
This is the body.
</body>height проценты по наследству (что включает в себя min-height and max-height, тоже). Из спецификации CSS:
Задает процент для определения используемого значения. Процент вычисляется относительно высоты блока, содержащего сгенерированный блок,.
То, что большинство людей не понимают, что body является лишь элементом, как и любой другой, и так html. То, что люди также не понимают, состоит в том, что эти элементы не имеют встроенной высоты. Родительский номер html - это окно просмотра, и оно делает, имеет внутреннюю высоту 100%. Окно просмотра - более или менее - окно браузера, минус любое меню или заголовки.
Поскольку height проценты наследуют от своих родителей, и вы не имеете height набор для вашего html элемента, ваш CSS из min-height: 100%; не имеет значения принять 100% из. Таким образом, ваше тело принимает min-height: 100% из 0, в основном.
Чтобы это исправить, просто скажите вашему html элемент, чтобы быть 100% высота окна просмотра:
html {
height: 100%; /* this is the important bit */
}
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}<body>
This is the body.
</body>Однако, если вы не хотите, чтобы установить весь документ (я настоятельно рекомендую вам это сделать), вы также можете использовать position: absolute; на своем элементе body, чтобы высота процента всегда разрешалась независимо от высоты его родительского элемента. Это то, что Сакиб пытался понять в комментариях выше. Из спецификации CSS на минимальной высоте и высоте, соответственно:
Если высота содержащего блока не указана явно (то есть, это зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процент значение рассматривается как «0» (для «min-height») или «none» (для «max-height»).
-
Обратите внимание, что высота содержащего блока абсолютно позиционированного элемента не зависит от размера самого элемента, и, таким образом, в процентах высоты на такой элемент всегда может быть решена.
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
position: absolute;
margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}<body>
This is the body.
</body>(я не знаю, какой код ваш работает в Chrome, но код в ваш вопрос имеет такое же поведение в Chrome, как это делает в Firefox.)
'height' в процентах работает на абсолютно позиционированных элементах. Если вам нужно это указать в процентах, добавьте 'position: absolute;' в стиль 'body' –
@SaqibAmin min-height отлично работает в google chrome. – frosty
Я только что подтвердил стиль на пустом документе, вам нужно добавить 'position: absolute;', чтобы заставить его работать так, как вы хотите его –