不定义高度属性如何让一个div浮动？

Question

这看起来非常简单（也许只是卡住了）-> 只是为了好玩，目前没有实际需求。

我得到了这个：

<div class="master">
    <div class="left">
        <p>LEFT</p>
    </div>
    <div class="right">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    </div>
</div>

---

.master {
    width: 100%;
    height: 100%;
}
.left {
    width:10%;
    float: left;
    background: red;
}
.left p {
    padding: 5px;
    color: #fff;
    text-align: center;
}
.right {
    width: 89%;
    margin-left: 1%;
    float: left;
    background: blue;
    color: #FFF;
}
.right p {
    padding: 0px 15px 0px 15px;
    text-align: justify
}

所以，正如您所看到的，我没有定义高度属性，所以红色 div 只占用了需要的高度。

我想要的是这样的效果：红色 div 占用整个容器的高度，而蓝色 div 则更加高。

JSFiddle 连接在这里。

- fiskolin

---

你可以使用弹性盒子（flexbox）。 - neatnick

这是HTML和（浏览器支持的CSS）的常见而令人沮丧的缺陷。有几种hacky解决方案，以及一些新的尖端CSS3解决方案（flexbox）。 - Zach Lysobey

一个类似问题的好的解决方案和示例代码可以在这篇文章中找到：http://css-tricks.com/fluid-width-equal-height-columns/ - Zach Lysobey

@ZachL，这怎么算是一个缺点呢？根据答案中的描述，似乎有一个相当直接的解决方案。 - drew

以下解决方案强制您将div的display属性设置为table-(cell)。我忘记了它们与block级元素有何不同，但我记得有一些需要注意的地方。我现在会去研究一下。 - Zach Lysobey

嗯，也许我还记得以前要支持IE7/8的时候。CSS-Table属性只适用于IE8及以上版本（http://caniuse.com/css-table）。很高兴那些日子已经过去了;-) - Zach Lysobey

Answer 1

我认为最好的方法是：

.master {
    width: 100%;
    height: 100%;
    display: table;
}
.left {
    width:10%;
    height: 100%;
    float: left;
    background: red;
    display: table;
}
.right {
    width: 89%;
    margin-left: 1%;
    float: left;
    background: blue;
    color: #FFF;
    display: table;
}

- Michael Silunsky

---

使用display: table-cell来定义.left和.right会更合理吗？ - Marc Audet

非常好用！但是，正如@marcaudet所说，我想table-cell可能更合适。:) 已经尝试过了，但是像table那样并没有起作用。 - fiskolin

Answer 2

一个不使用CSS表格的替代方案如下：

.master {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    position: relative;
}
.left {
    width:10%;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.right {
    width: 89%;
    margin-left: 11%;
    overflow: auto;
    background: blue;
    color: #FFF;
}

如果.right块控制整体高度，请将.right保持在常规内容流中，并设置margin-left: 11%以留出一些空白。

使用绝对定位来放置和调整.left块的大小。

请参见演示：http://jsfiddle.net/audetwebdesign/97CY2/ 然而，如果你不知道两个子元素中哪一个更高，则应该使用table-cell。

- Marc Audet

---

这是一个很棒的答案！在这种情况下，更高的子元素是.right，所以可以像Michael说的那样使用第一种方法。但真的是非常好的答案。 - fiskolin

Answer 3

你需要在容器上使用 display:table，在子元素上使用 display:table-cell：

FIDDLE

CSS:

.master {
    width: 100%;
    height: 100%;
    display:table;
}
.left {
    background: red;
    display:table-cell;
    width:10%;
}
.left p {
    padding: 5px;
    color: #fff;
    text-align: center;
}
.right {
    border-left: 10px solid #fff;
    background: blue;
    color: #FFF;
    display:table-cell;
}
.right p {
    padding: 0px 15px 0px 15px;
    text-align: justify
}

- web-tiki

---

你可以在 .master 中加入 display: table，但是CSS引擎足够聪明，会创建一个匿名的表格包围 .left 和 .right，所以无论哪种方式都可以实现，且可以使用 vertical-align 的优势。 - Marc Audet

@MarcAudet 在流程中不知何故被删除了 display:table ... 我只是像我的第一个意图一样把它放回去了。 - web-tiki