Почему min-height не работает?

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

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

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

30
background-image css html

6 ответов

указать height: 100% на html, body и #body2 элементы (линии 1358).

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

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

28

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

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

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

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

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

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

13

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

3

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

1

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

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

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

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

-3

винт. У кого нет JavaScript в любом случае? Особенно для этой демографической группы.

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>
-3