固定宽度 CSS 浮动 2 列布局等高问题答案

【问题标题】：Fixed-width CSS floated 2-column layout equal heights problem固定宽度 CSS 浮动 2 列布局等高问题
【发布时间】：2010-08-31 04:39:39
【问题描述】：

我有一个页面设计，我正试图用一个标题（菜单栏）来实现，下面是一个在 css 中具有静态宽度的 div。这个 div 包含两个 div - #contentArea 和 #menuArea，每个都有一个 header、middle 和 footer（header 和 footer 有背景图像，而中间适合内容）。

我已将 float: left 和正确的静态宽度应用于 #contentArea 和 #menuArea 效果很好，但我想强制这两个高度相同。我查看了内联/内联块解决方案，但这些似乎给 IE6/7 带来了很多麻烦。不幸的是，这种设计需要合理（不一定完美）显示回 IE6/FF3。

我在http://home.theevilpenguin.org/c-Help/Index 上放置了一个简单的页面来展示我在我的家庭服务器上所做的事情

任何人都可以推荐一种方法来完成此操作或需要研究的内容吗？

谢谢

【问题讨论】：

标签： css

【解决方案1】：

您可以尝试在 pageMenuArea div 上设置属性height: 100%;。这应该使其与包含 div pageBody 的高度相同。

【讨论】：

不幸的是，#pageBody 的所有子项都是浮动的，#pageBody 没有任何高度可供#pageMenuArea 继承。如果我能得到一个内联类型的解决方案，这可能会奏效。
我已经弄明白了——我给了 pageMenuArea position: absolute 和一个顶部、底部和右侧的值和高度：100%。这似乎通过对底部值进行了一些调整来达到目的。