CSS 高度标准模式答案

【问题标题】：css height standards modeCSS 高度标准模式
【发布时间】：2011-06-03 13:11:56
【问题描述】：

您好，很高兴认识您。我想问以下问题。

dfssdgfdsgsd sdgsdg
        sgdsdsgsdg

ggg

正文>

是否可以让#secondDiv 占据剩余垂直空间的 100%（高度）？我不想使用最小高度（不适用于 ie）或 javascript。
完成 html http://paste2.org/p/1177197
谢谢。
ps：我知道有很多相关的问题，如有重复，请见谅。

【问题讨论】：

min-height 仅在 IE6 中不起作用。
第一个div有固定高度吗？

标签： css html standards height

【解决方案1】：

如果您可以为顶部 div 使用固定高度，那么通过使用绝对定位可以轻松绕过第二个 div。

CSS

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#head{
  border:1px solid #ff0000;
  height:50px;
}
#content{
  position:absolute;
  top:50px;
  bottom:0;
  width:100%;

  border:1px solid #ff0;
}

HTML

<body>
    <div id="head">
        <pre>dfssdgfdsgsd sdgsdg
        sgdsdsgsdg</pre>
    </div>
    <div id="content">
        ggg
    </div>
</body>

演示：http://www.jsfiddle.net/RVTpT/

【讨论】：

当然...如果#head 的高度不固定，您会考虑纯css 解决方案吗？顺便说一句谢谢:)
@tasoss，纯 css 是不可能的。一个技巧（取决于要求）是将#header 放在#content 的100% 高度内，没有绝对定位。但是，如果您想使用示例中的边框，则将不起作用..

【解决方案2】：

将#secondDiv { height:100%; } 添加到您的 CSS。

我相信为了让它在 IE 中工作，你需要设置

html, body { height:100%; }

还有

【讨论】：

@Gaby：不，它没有......你认为第一个 div 使用 20%，第二个 div 使用 80%？一个可能的替代方案（而不是根本没有高度）可以例如，以像素为单位测量的高度。
不，这没有帮助。 #secondDiv 将有 100% 的 body 忽略第一个 div 的存在。
@tasoss，问题是如果你定义一个高度（在任何单位%或px）这意味着高度是固定的。