Почему минимальная высота не работает? - PullRequest
Новая
       1

Почему минимальная высота не работает?

34 голосов
/ 11 марта 2011

Итак, вот совок.

У меня есть градиент, примененный к фону элемента тела.Затем у меня есть контейнер (сразу после тела), к которому применено фоновое изображение .png.Градиент всегда увеличивается как минимум до 100% высоты окна, а контейнер (# body2) - нет.

Есть предложения, почему это не работает?Вы можете просмотреть HTML на моей веб-странице здесь: http://www.savedeth.com/parlours/

Ответы [ 6 ]

29 голосов
/ 11 марта 2011

Укажите height: 100% для элементов html, body и #body2 (строка 1358). 

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

Не проверено в IE 6, работает в версии 7.

16 голосов
/ 13 июля 2016

Использование vh вместо% работало для меня без необходимости использовать какие-либо дополнительные приемы.

Вот что у меня есть: 

html, body, .wrapper {
    min-height: 100vh;
}

Где .wrapper - это класс, который вы применяете к своему контейнеру / оболочке или основному объему контента, который вы хотите растянуть на всю длину экрана.

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

Это должно работать в большинстве браузеров .

3 голосов
/ 11 марта 2011

У вас установлена ​​минимальная высота 100%, которая будет такой же высокой, как и у всех элементов, которые заполняют пространство.Выразите минимальную высоту в пикселях.Также обратите внимание, что для IE6 требуется собственный набор правил.Подробнее см. http://davidwalsh.name/cross-browser-css-min-height.

1 голос
/ 11 сентября 2013

position: absolute; работает в большинстве случаев

0 голосов
/ 11 марта 2011

Винт это.Кто не имеет JavaScript в любом случае?Специально для этого демографического. 

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>
0 голосов
/ 11 марта 2011

что-то устанавливает высоту вашего элемента тела в 320 пикселей (если вы посмотрите в элементе проверки Chrome)

, поэтому 100% составляет 320 пикселей.Вот почему он отображается только в верхней части страницы со 100% высоты 320 пикселей.

Вы должны установить высоту, чтобы минимальная высота работала.

, поэтому установитевысота @ 100% в целом должна работать.

...