Итак, вот совок.
У меня есть градиент, применяемый к фону элемента тела. Затем у меня есть контейнер (сразу после тела), на котором применено фоновое .png-изображение. Градиент всегда расширяется, по крайней мере, до 100% высоты окна, но контейнер (# body2) этого не делает.
Любые предложения, почему это не работает? Вы можете проверить HTML на моей веб-странице здесь: http://www.savedeth.com/parlours/
Вверните его. У кого нет javascript? Особенно для этой демографии.
<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
$("body").height($(window).height());
}
});
</script>
Укажите height: 100% в элементах html, body и #body2 (строка 1358).
html, body, #body2
{
height: 100%;
min-height: 100%;
}
Не тестировался в IE 6, работает в 7, хотя.
Использование vh вместо% работало для меня без использования каких-либо дополнительных трюков.
Это то, что у меня есть:
html, body, .wrapper {
min-height: 100vh;
}
Где .wrapper - это класс, который вы применяете к своему контейнеру/обертке или основному содержимому, которое вы хотите растянуть на всю длину экрана.
Это будет работать так, как вы ожидаете, когда содержимое внутри обертки будет меньше или больше, чем позволяет высота экрана.
Это должно работать в в большинстве браузеров.
У вас установлена минимальная высота до 100%, которая будет только высотой, чем любые элементы, заполняющие пространство. Выражайте минимальную высоту в пикселях. Также обратите внимание, что IE6 - требует наличия собственного набора правил. Подробнее см. http://davidwalsh.name/cross-browser-css-min-height.
position: absolute; работает в большинстве случаев
что-то устанавливает высоту вашего элемента тела на 320 пикселей (если вы посмотрите в элемент проверки хрома)
поэтому 100% составляет 320 пикселей. поэтому он отображается только в верхней части страницы со 100% высоты 320 пикселей.
вам нужно установить высоту для работы min-height.
так что установить высоту @100% в целом должно работать.