divs сворачиваются вокруг заголовка

У меня есть несколько вложенных 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)

Решение

В этом случае вам действительно не нужно использовать абсолютное или относительное позиционирование.

Следующее достигает того, что вам нужно, с минимальным количеством переборов 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>

Если вы хотите что-то очистить, вам также нужно переместить этот элемент, чтобы он работал правильно. Так что вам понадобится.

#header { clear: both; float: left; }
#body { clear: both; float: left; }

Я не поклонник использования "clear: both", если это не совсем необходимо. Лучшее решение - установить для свойства «переполнение» сворачивающегося DIV значение «auto».

Попробуйте что-нибудь вроде:

#header { float: left; overflow: auto; }

Добавьте стиль «clear: both» в свой div с идентификатором «body». Вы также можете добавить div с этим стилем сразу после «связки div с плавающей запятой» и перед закрывающим тегом заголовка div.

Попробуйте очистить после ваших плавающих элементов в заголовке.

<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.