У меня есть несколько вложенных div:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
- стиль оболочки:
width: 780px; margin: 20px auto; border: solid black 5px; - стиль заголовка:
position: relative; min-height: 125px; - тип кузова:
position: relative; - стиль содержания:
position: absolute; left: 50px; top: 0px;
У меня есть куча элементов html в div содержимого, и по какой-то причине div тела и div-оболочка сворачиваются вокруг заголовка, и div содержимого висит сам по себе, если я не устанавливаю фиксированную высоту для тела div. Единственные плавающие элементы, которые у меня есть, находятся в заголовке.
РЕДАКТИРОВАТЬ :
Если я удалю содержимое div (и опущу элементы html прямо в тело), div тела перестанет разрушаться! Пытаюсь понять, почему - думаю, это связано с position: absolute содержимого div.
Есть какие-нибудь подсказки, почему это происходит и как решить?
Я посмотрел на этот вопрос, но, похоже, у меня это не работает (или, может быть, я очищаюсь не в том месте ...).
Ответов (8)8
В этом случае вам действительно не нужно использовать абсолютное или относительное позиционирование.
Следующее достигает того, что вам нужно, с минимальным количеством переборов css.
Цвета, потому что я люблю цвет, и вы тоже должны!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
Попробуйте очистить после ваших плавающих элементов в заголовке.
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div style="clear:both;"></div> <!-- Or use a clearfix... -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Пока очищающий элемент находится внутри содержащего div, он должен выполнять то, что вы хотите.
Я использую этот стиль для очистки элементов:
.Clear { clear: both; height: 0; overflow: hidden; }
Поместите очищающий div в заголовок, чтобы указать размер элемента заголовка:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div class="Clear"></div>
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Установка нулевой высоты очищающего элемента приводит к тому, что он сам по себе не занимает места. Стиль переполнения таков, что IE не будет давать ему высоту, даже если высота установлена на ноль. У IE есть странная идея, что каждый элемент должен иметь высоту не менее одного символа, установив overflow: hidden; сохраняет высоту равной нулю, даже если содержимое элемента в IE составляет один символ.
Попробуй это. Примечание: переполнение, скрытое в div заголовка, устраняет необходимость в очищающем div. Обратите внимание, почему вы используете относительное + абсолютное позиционирование для контента. Так лучше обрабатывать с полями, имхо.
<html>
<head>
<title>Layout</title>
<style type="text/css">
#wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
#header { overflow: hidden; background-color: yellow; }
#header div { float: right; border: 2px solid red; }
#body { position: relative; }
#content { position: absolute; left: 50px; top: 0px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div id="body">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
</body>
</html>
Если вы хотите, чтобы #content отображался в границах #wrapper, попробуйте эту замену для размера после удаления position:relative из #body (или полного удаления этого DIV):
#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}
Таким образом, вы сможете увидеть #content внутри оболочки, но под #header.
Может быть, потому, что #content действительно не из-под чего торчит. #header, когда он был установлен в относительный, вид исчезает для нижеприведенного, даже если #body затем был установлен в абсолютное значение, а его потомки - в относительные.
При изменении #content с position:absolute на position:relative он попадет в предыдущий DIV, которым в данном случае был #header.
