Question

你好，很高兴见到你。我想问以下问题。

<body>
    <div style="border:1px solid #ff0000">
        <pre>dfssdgfdsgsd sdgsdg
        sgdsdsgsdg</pre>
    </div>
    <div style="border:1px solid #ff0" id="secondDiv">
        ggg
    </div>
</body>

是否可以让#secondDiv占据剩余垂直空间的100％（高度）？我不想使用min-height（在ie中不起作用）或javascript 完整的html http://paste2.org/p/1177197
谢谢。
ps：我知道存在很多相关问题，所以如果有重复，我很抱歉。

Answer 1

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

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

html, body { height:100%; }

以及

Answer 2

如果你可以使用固定高度作为顶部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/

css高度标准模式

2 个答案: