如何解决基本的CSS浮列问题
| 我有一个向左浮动的边栏,然后还有一个向左浮动的主要内容区域。 我的页脚没有停留在主要内容之下,并且经常跳到最上面,这取决于浏览器页面的大小。页面的内容是动态的,因此我无法设置最小高度来解决该问题(尽管如果将其应用于已知高度的静态页面也可以使用)。 我有这样的布局<div id=\'container\'>
<div id=\'sidebar\')
</div>
<div id=\'main\'>
</div>
</div>
样式:浮动侧边栏,主要内容在左侧。
清算权不影响问题。我怎么解决这个问题?谢谢。
解决方法
如果页脚位于容器内,则为其设置100%的宽度,并将其设置为
clear:both
(给它一个宽度是可选的,但可以帮助较旧的IE \'s
如果页脚在容器外部,则将容器本身设置为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;}
, 记得在之后清除浮游物
<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>
, footer {
clear: both;
}
这样就可以了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。