Question

我有一个左侧浮动的侧边栏，然后是一个左侧浮动的主要内容区域。我的页脚不会停留在主要内容之下，并且通常会跳到最后一圈，具体取决于浏览器页面的大小。页面的内容是动态的，所以我无法设置最小高度来解决问题（尽管如果我将它应用于具有已知高度的静态页面，它确实有效。）

我的布局有点像这样

<div id='container'>
    <div id='sidebar')
    </div>
    <div id='main'>
    </div>
</div>

样式：浮动侧边栏，左侧主要内容。

清除权利不会影响问题。我怎么解决这个问题？谢谢。

Answer 1

如果页脚在容器内部，请给它100％的宽度并让它clear:both（给它一个宽度是可选的，但可以帮助更老的IE）

如果页脚位于容器外部，则将容器本身设置为overflow: hidden或以某种方式将其设置为新的块格式化上下文，以便它包含两个浮动，然后页脚应该自然地位于其下方

以下代码应涵盖两种情况..

#container {zoom: 1; overflow: hidden; background:#eee;}
#sidebar {float:left; width: 200px; border: 1px solid #f00;}
#main {float: right; width: 600px; border: 1px solid #000;}
#footer {clear: both; background: #0f0;}

Answer 2

请记得清除你的花车 <div id='main'></div>

之类的东西

<div id='container'>
    <div id='sidebar' style="float:left">
    </div>
    <div id='main' style= "float:left">
    </div>
    <div style="clear:both"></div>
</div>

假设页脚位于“容器”之外

<div id="footer"></div>

Answer 3

footer {
    clear: both;
}

这就是诀窍。

基本的CSS浮动列问题

3 个答案: