HTML5 тег против Div для автоматического изменения размера

Question

Я надеюсь на решение, но в худшем случае объяснение того, почему мой div не изменяет размеры, и это может быть потому, что я использую тег nav.

У меня есть следующий HTML. Когда содержимое внутри моего тега section увеличивается, то же самое происходит и с классом page-content. Однако, когда мои пункты меню увеличиваются, размер div не изменяется.

<div class="page-content">
    <nav>
      <ul>{menu items here}</ul>
    </nav>
    <section id="main">
        {bunch of text here}
    </section>
</div>

Вот мой css.

.page-content 
{
    display: block;
    position:relative;
    width: 100%;
   margin-left: auto;
    margin-right: auto;
    background-image: url(images/bg-home-main.jpg);
    background-repeat: no-repeat;
    background-position: center;

}

    nav {
    display: block;
    float: left;
    padding: 15px;
    position: relative;
    margin: 0px 0px 0px -45px;
}

#main {
    padding: 5px 25px 5px 25px;
    margin-left: 175px;
}

Проблема, с которой я столкнулся, заключается в том, что у div есть фоновое изображение, которое должно покрывать фон области навигации и раздела. Тем не менее, это происходит только в том случае, если моя область сечения больше (сверху вниз), чем моя навигация, так как div будет растягиваться, чтобы соответствовать размеру раздела. Однако, если моя область навигации больше, она на самом деле расширяется за пределами div и там для изображения.

Answer 1

Когда вы перемещаете элемент, вы выводите его из потока, и он не расширяет содержащий его элемент.Одним из способов решения этой проблемы является добавление переполнения: скрытый;на содержащий элемент.

Использование переполнения: скрыто;является формой clearfix - исправление, которое заставляет содержащийся элемент расширяться, чтобы показывать любые перемещенные, содержащиеся элементы.На самом деле любое значение переполнения работает, но переполнение: авто вызывает полосы прокрутки в Проводнике на Mac (не уверен, что кто-нибудь еще использует это), а переполнение: прокрутка вызывает полосы прокрутки, что является той же проблемой.Для некоторых версий IE вам также нужно включить значение ширины, чтобы это работало.Существуют другие прозрачные исправления, обычно включающие вставку какого-либо элемента после плавающего элемента, который очищает этот плавающий элемент, также заставляя содержащийся элемент расширяться, чтобы содержать его - элемент div без высоты, но примененный к нему clear, или используя: afterпсевдоэлемент, но я обычно использую переполнение, поскольку оно не добавляет никакой разметки представления.