Question

我正在尝试创建一个左侧有面板的页面。该面板有一个标题，一个内容区域和一个页脚。主面板包装器div应该是页面高度的100％。页眉和页脚没有指定的高度，因为我只希望它们足够大以容纳文本和填充，而中心内容区域我想要100％的容器减去页眉和页脚的高度。我不知道我怎么能在css中做到这一点。谁知道该怎么办？感谢。

html页面＆amp; css在这里 - https://gist.github.com/1641918

Answer 1

我已经多次处理过这个问题。根据我的经验，在一两个特定情况下只使用CSS就可以可能。否则，您需要使用Javascript和CSS标记它。因为，为了将元素设置为100％高度，必须延迟其父元素的高度。根据元素的嵌套程度以及它之前可能有或没有的兄弟姐妹，将确定是否可以单独使用CSS。

将conent容器div设置为高度浏览器视口的100％的一种方法是通过以下样式。

html {
  height:100%;
}
body {
  height:100%;
}
#container {
  min-height:100%;
  max-height:100%;
}

<html>
<body>
  <div id="container">
    ...
  </div>
</body>
</html>

根据布局，它很容易变得棘手。

Answer 2

您可以使用display as table来完成此操作。通过在内容“行”上设置100％的高度，然后在其他内容上设置0％的高度。表尝试使它们的行尽可能地匹配指定的高度。

http://jsfiddle.net/PZALU/

html, body { height: 100%; width: 100%; }
div#container { display: table; height: 100%; width: 100%;}
div#container > div { display: table-row; }
div#container > div > div { display: table-cell; border: 1px solid gray; }
div#header { height: 0%; }
div#content {height: 100%; background: lightgray; }
div#footer { height: 0%; }

css有100％高度的困难

2 个答案: