如何让div继承浏览器窗口的宽度和高度

Question

在我问之前，我告诉你我在css上真的是个新手。我一直在想css和我不会相处得很好（开个玩笑！）无论如何，我认为我的问题很简单，但我真的找不到让我的风格按照应有的方式行事的方法。

我想要一个双列布局。左列固定尺寸，另一列是流体。我只想让它在高度和宽度方面继承浏览器窗口的视口。我尝试在几乎所有的div上添加height:100%;，但我无法使其正常工作。确实，一个新手。

我已经设置了一个小提琴，让你看看我的全新情节。

fiddle

Answer 1

你快到了！您忘记在正文上声明height: 100%; 。

由于您只在body标记上声明它，因此它不知道100％的高度，因为它的父级html没有设置高度。

这是我改变的CSS：

body, html {
    margin:0;
    padding:0;
    line-height: 1.5em;
    height: 100%;
    width: 100%;
}

#maincontainer {
    height: 100%;
}

最后，小提琴：Demo

我还建议改进你的html的结构。

这是一个显示如何清理结构的小提琴，Demo。

Answer 2

要将div的高度设置为窗口高度的100％，您应该将body和html高度设置为100％。然后将他们的孩子设置为100％，让他们占据整个窗口的高度..

body, html {
  margin:0;
  padding:0;
  line-height: 1.5em;
  height: 100%;
  width: 100%;
}