Высота отделения CSS не расширится
У меня есть боковая панель DIV, который я хочу развернуть вертикально для соответствия его содержанию отделения.
Я сделал это для выполнения этого
html, body, #wrapper, #content, #sidebar{
height:100%;
}
Но обертка, содержание и боковая панель никогда не расширяются на прошлых приблизительно 1000 пкс, даже когда содержание несколько раз - это.
Я полагаю, что это вызвано тем, что содержание #wrapper, #content полностью пущенные в ход ОТДЕЛЕНИЯ.
Я попытался поместить пустые ОТДЕЛЕНИЯ с clear:both как последний элемент в #wrapper и #content, но напрасно.
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
....
<div class="clear"/>
</div>
<div class="clear"/>
</div>
</body>
примечание: нижний колонтитул является фиксированной позицией
4 ответа
проблема в том, что вы устанавливаете 100% на html, body, и #wrapper, это заставляет их рост быть ростом их родителей, #wrapper's parents is body, body's is html, что такое родитель html? Я не уверен, я предполагаю, что окно браузера (или его порт просмотра), если да, то #wrapper's height всегда будет равен высоте окна браузера, так что если высота окна браузера 1000px, то
#высота обертки всегда будет 1000px, а так как вы устанавливаете 100% в #sidebar и #content, то и их высота всегда будет 1000px, несмотря на высоту внутренних элементов
если я был прав, то вы должны установить высоту html отдельно, держать высоту других на 100%, а мин высоту html установить на 100% и оставить высоту вне игры. В теории это заставит html быть как минимум выше окна браузера, но расширяться, когда внутренние элементы выше, чем браузер, хотя я не тестировал его.
дайте мне знать, был я прав или нет.
Edit:
я тестировал его, он работает.
Просто сделайте так:
html,
body{
min-height: 100%;
}
не устанавливайте высоту, и убедитесь, что поплавки и абсолютное позиционирование на внутренних элементах отсутствуют, если вы хотите, чтобы высота внутренних элементов была принята во внимание. Теперь тело будет занимать весь видовой порт окна браузера, когда не хватает элементов для его нажимания, а когда их хватает, тело будет расширяться до самого низа страницы, а не только до окна браузера.
протестировал его в хроме и должен работать и в firefox
.
не знаю насчет т.е.
Нет, в результате второго теста, он не сработал
.
кажется, что только когда родительский элемент имеет заданную высоту (например, высота: 500px или высота: 100%), высота: 100% будет работать; когда родительский элемент имеет мин. высоту: 100% и нет высоты, внутренний элемент не может использовать высоту: 100%, чтобы соответствовать родительскому
Я не вижу необходимости устанавливать высоту этих элементов на 100%. Вы говорите: "У меня есть боковая панель DIV, которую я хочу развернуть вертикально, чтобы соответствовать ее содержащему div". Вы имеете в виду, что хотите, чтобы высота боковой панели соответствовала высоте #content DIV? В этом случае рассмотрим метод "искусственных колонок", описанный здесь . Другой способ - вычислить высоту #content div с помощью Javascript, и применить эту высоту к # sidebar.
Для правильного очищения плавающих элементов, очищающий элемент должен располагаться ПОСЛЕ плавающего элемента, а не внутри него. Один из полезных трюков, который я часто использую сам - псевдо-селектор :AFTER. Предположим, нужно очистить #контент. Затем:
#content:after
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Это поместит невидимый элемент после вашего элемента, и он очистит ваш элемент.
Для того, чтобы div совпадал с высотой его контейнера, вы можете использовать позиционирование:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#wrapper{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
#footer{position:absolute;height:100px;right:0px;bottom:0px;left:0px;background:green}
#sidebar{position:absolute;width:200px;top:0px;bottom:100px;left:0px;background:blue}
#content{position:absolute;top:0px;right:0px;bottom:100px;left:200px;background:red}
</style>
</head>
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
</body>
</html>
из того, что я могу сказать, это основано на float: left / right удалите это, и он отрегулирует