Как я вынуждаю блок DIV расшириться на конец страницы, даже если он не имеет никакого содержания?
9 ответов
Ваша проблема не состоит в том, что отделение не в 100% высотой, но что контейнер вокруг этого не. Это поможет в браузере, я подозреваю, что Вы используете:
html,body { height:100%; }
Вы, возможно, должны скорректировать дополнение и поля также, но это получит Вас 90% пути там. Если необходимо заставить его работать со всеми браузерами, необходимо будет бездельничать с ним немного.
Этот сайт имеет некоторые превосходные примеры:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
я также рекомендую идти в http://quirksmode.org/
У меня нет кода, но я знаю, что сделал это однажды использование комбинации height:1000px и граничной нижней части:-1000px; Попробуйте это.
Также Вам могло бы понравиться это: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
Это не вполне, что Вы попросили, но это могло бы также удовлетворить Вашим потребностям.
В зависимости от того, как Ваши разметки, Вам могла бы сойти с рук установка фона на <html> элемент, который всегда является, по крайней мере, высотой области просмотра.
В то время как это не столь изящно как чистый CSS, маленький бит JavaScript может помочь выполнить это:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Свойство минимальной высоты не поддерживается всеми браузерами. При необходимости в #content для расширения, это - высота на более длинных страницах, свойство высоты прервет его.
Это - определенный взлом, но Вы могли добавить пустое отделение с шириной 1 пкс и высотой, например, 1000 пкс в Вашем #content отделении. Это вынудит содержание быть по крайней мере 1000 пкс высотой и все еще позволить более длинному содержанию расширять высоту при необходимости
Вы можете вид взлома это с минимальная высота объявление
<div style="min-height: 100%">stuff</div>
Попытайтесь играть вокруг со следующим правилом css:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Изменение высота для удовлетворения странице. высота упоминается дважды для перекрестной совместимости браузера.
Попробуйте решение "Sticky Footer" Райана Фейта,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Работает в IE, Firefox, Chrome, Safari и, предположительно, в Opera, но не тестировал это. Отличное решение. Очень просто и надежно внедрить.