Question

我的页面顶部有一个导航栏。在导航栏中有2组菜单（ul）。一组是向左浮动，另一组向右浮动。然后在整个菜单下方，是流程中的内容。

问题是，导航菜单将具有动态内容。所以他们需要：

在内容增长时推送内容
不能有固定的高度。

任何方法可以实现这一点，但菜单的“效果”浮动在页面的另一侧？

Answer 1

将overflow: auto;添加到DIV或两个导航UL周围的任何容器元素。

#header { overflow: auto; }

<div id="header">
 <ul id="primaryNav">...</ul>
 <ul id="secondaryNav">...</ul>
</div>

<div id="content">...</div>

Answer 2

使用此css并提供这些UL（导航栏）类clearfix的父级。这样你就不必指定一个固定的高度，他们会把内容推下来。

您需要的CSS：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

CSS浮动和动态内容

2 个答案: