我有这个布局:
顶栏是固定的。然后我想在左窗格中有一个侧边栏,以及一个包含主要内容的右窗格。窗格是不同的颜色,并由边框分隔。
问题是有时左窗格会更高,有时右窗格会更高。所以一个窗格比另一个短(颜色结束,你看到白色)。
我已经尝试过height:100%;
,但这只有在内容短于浏览器高度时才有效。
我怎样才能用 CSS 解决这个问题?
您可以使用一种称为“仿列”的技术。一个很好的例子是这个页面上的方法 3 ,或者正如 Wex 在下面的评论中添加的那样,这个链接在 A List Apart 上。
你可以试试这样的。唯一的问题是你需要知道一个固定的高度,如果有可能有一列比另一列大并且没有办法知道哪一列会更大,你可能需要做一些 jquery 来弄清楚。
我对这个问题的解决方案通常是嵌套列,以便一列控制另一列,然后给另一列一个背景图像,看起来好像它是第一个继续:
<style>
*{margin:0;padding:0;}
.main_con{position:relative;margin:0 auto;width:960px;}
.head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
.col_con{padding:42px 0 0 0;}
.left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
.right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
.right_col_content{float:left;width:585px;}
.clr{clear:both;}
</style>
对于 html:
<div class="main_con">
<div class="col_con">
<div class="right_col">
<div class="left_col">
<p>left column content pushes right column down</p>
</div>
<div class="right_col_content">
<p>right column content</p>
</div>
<br class="clr" />
</div>
</div>
<div class="head_con">
<p>head content</p>
</div>
</div>
注意:*{} 剥离仅用于示例目的,应替换为适当的默认 css 剥离位。