css - 2 列 CSS float 布局

Question

这个简单的 CSS 布局让我大吃一惊。我有一个 2 列的固定布局，其中一个页眉和一个页脚都包含在一个包装器中。当“右”列中的内容较长时，我需要 CSS 中的“左”背景区域自动扩展到页脚(如附件所示。我试过“高度:100％；”这不起作用。

有人可以帮忙吗？

http://eyes-open.com/index.html

Answer 1

是的，这个问题很烦人。

另一种解决方案是将容器 div 设为您希望导航栏的颜色，然后将内容设为另一种颜色:

<style>
#page { background-color:blue; width: 996px; etc }
#contents { background-color:red; etc }
</style>
<div id="page">
     <div id="sidebar">
    </div>
    <div id="contents">
   </div>
</div>

最终看起来像:

 _____________________
|   |                 |
|   |                 |
|   |                 |
|   |                 |
|___|                 |
|___|_________________|

使用div，但是背景“页面”的颜色在左边，内容的背景在右边

希望对您有所帮助。当右侧小于左侧时，这会受到影响 :(

编辑:

如果您愿意，也可以使用这种格式的背景图像。这是在 html/css 中做起来非常尴尬的事情，你只需要玩直到找到适合你的解决方案。这花了我几天时间来研究我的网站 :(