等高并排浮动元素答案

【问题标题】：Equal-height side-by-side floating elements等高并排浮动元素
【发布时间】：2011-12-14 08:01:40
【问题描述】：

抱歉，我提出了一个非常简单的问题，但我只是从 HTML 和 CSS 开始，我想在其中创建一个 <div> 和两个 <div>s（一个在左侧浮动，一个在右侧））。我希望它们都具有相同的高度（从父级继承，所以height: 100%），但有些东西不像预期的那样工作。

下面是红色 div 下方的一些文字（尤其是在较小的分辨率下）： http://jsfiddle.net/KqbtG/

这个解决方案几乎是完美的，看起来和预期的完全一样，但红色的 div 高于蓝色的（Lorem ipsum do etc. is inivsible）：

http://jsfiddle.net/4EnF9/1/

有什么想法吗？我不能有固定的高度，因为我会有很多这些 div 和不同的内容。

【问题讨论】：

标签： css height css-float

【解决方案1】：

在您的第二个示例中，红色 div 超过蓝色 div，因为红色 div 是绝对定位的，这有效地将其从页面的“流”中删除。

要解决此问题，请将margin-left:100px 添加到右侧（蓝色）div 以将其从红色 div 下方移出。

示例：http://jsfiddle.net/4EnF9/2/

【讨论】：

【解决方案2】：

#container {
    display: inline-block;
    background-color: #eee;
    width: 90%;
    height: 300px;
}

#menu {
    float: left;
    background-color: red;
    width: 100px;
    height: 100%;  
}

#content {
    background-color: blue;
    height: 100%; 
}

你必须做两件事：

设置容器div的高度，使其可以被继承
确保内容的高度：100%

【讨论】：