Question

很抱歉一个非常简单的问题，但我刚开始使用HTML＆amp; CSS和我想在其中创建一个<div>和两个<div>（一个漂浮在左侧，一个漂浮在右侧）。我希望它们两者具有相同的高度（从父级继承它，所以height: 100%），但是某些东西不能像预期的那样工作。

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

这个解决方案几乎是完美的，看起来与预期完全一样，但红色div高于蓝色（Lorem ipsum do等是不可行的）：

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

有什么想法吗？我不能有固定的高度，因为我会对这些div和它们中的不同内容感到满意。

Answer 1

#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％

Answer 2

在你的第二个例子中，红色div超越蓝色div，因为红色div位于绝对位置，这有效地将其从页面的“流”中移除。

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

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

等高的并排浮动元件

2 个答案: