我有一个包含 3 列的页面:一个主要内容 div，以及两侧的阴影/边框。
此处示例:http://jsfiddle.net/rfPJC/
我需要两侧的“阴影”div 才能转到页面底部。我该怎么做？
示例 HTML
<div id="wrapper">
<div id="left"></div>
<div id="main">
<div id="content"></div>
</div>
<div id="right"></div>
</div>
示例 CSS
html, body {height: 100%;}
#wrapper {height: 100%;}
#left {background: #555; width: 30px; height: 100%; float: left;}
#main {background: #999; width: 300px; float: left;}
#content {height: 2000px;}
#right {background: #555; width: 30px; height: 100%; float: left;}
最佳答案
我给两边一个容器......像这样:
<html>
<body>
<div id="wrapper">
<div id="sides_container">
<div id="left">Left Banner</div>
<div id="right">Right Banner</div>
<div id="main">
<div id="content">Hello</div>
</div>
</div>
</div>
</body>
然后像这样的 CSS:
html, body {height: 100%}
#wrapper {height: 100%}
#sides_container{width:360px; margin-left:auto; margin-right:auto; background:#555;}
#left {background: #555; width: 30px; height: 100%; float: left}
#main {background: #999; width: 300px; margin-right:auto; margin-left:auto;}
#content {height: 2000px}
#right {background: #555; width: 30px; height: 100%; float: right;}
我也喜欢居中，抱歉... http://jsfiddle.net/uhJHF/
关于css - 如何让三列都占满页面的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14866724/