Question

我正在尝试在容器div（来自Twitter Bootstrap）中创建2 div，取最大高度为100％。我创建了一个fiddle来演示，但不知何故它没有显示我想要的东西。

两个div都是浮动的。因此我使用了class="clearfix"。但这也不起作用。我错过了什么？

修改您在小提琴中看不到的是html和body已经在我的应用程序中设置为100％高度。

修改孩子div超出了它的父div，这就是它失败的原因。 jsfiddle已更新。有人可以看一下吗？

Answer 1

要使嵌套的块级元素占用100％的高度，即使其中没有任何内容，也需要将height: 100%;添加到相关元素中，并将 all 添加到其父元素中（包括HTML和正文）。请参阅此demo。

给div一个高度可以正常工作，但因为里面没有内容，所以html和body元素不会相应地延伸。

<强> HTML：

<html>
  <body>
    <div class=container>
      <div class=stretch-this>
      </div>
    </div>
  </body>
</html>

<强> CSS：

.stretch-this {
  background-color: khaki;
}

html,
body,
.container,
.stretch-this {
  height:100%;
}