HTML5标记与自动调整大小的Div相对应

Question

我希望有一个解决方案,但最糟糕的情况,解释为什么我的div没有调整大小,这可能是因为我使用的是nav标签.

我有以下HTML.当我的'section'标签内的内容增长时,div与页面内容类一样.但是,当我的导航菜单项增加时,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

当你浮动一个元素时,你将它从流中取出,它不会扩展它的包含元素.一个解决方法是添加overflow:hidden; 到包含元素.

使用溢出:隐藏; 是一种clearfix形式 - 一种修复方法,可以使包含元素展开以显示任何浮动的包含元素.实际上溢出的任何值都有效,但溢出:自动导致Mac上的资源管理器中的滚动条(不确定是否还有人实际使用它)和溢出:滚动会导致滚动条出现同样的问题.对于某些版本的IE,您还需要包含一个宽度值以使其起作用.还有其他明确的修复方法,通常涉及在浮动元素之后插入某种元素来清除浮动元素,也导致包含元素扩展以包含它 - 没有高度但是应用了清除的div,或者使用:after伪元素,但我通常使用溢出,因为它不添加任何表示性标记.