Question

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

我有以下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伪元素，但我通常使用溢出，因为它不添加任何表示性标记。

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

1 个答案: