Question

我正在寻找两个看起来像这样的div：

<div style="height:20px;" />
<div style="height:100%;" />

这给了我两个div，一个高度为20px，另一个为整个屏幕高度的100％，这使得垂直滚动条的值为20px。我真正想要的是一个20px，另一个是100％-20px。我知道IE有calc（）方法，但有没有更简单的方法可以在所有浏览器中使用？

Answer 1

#div1 {
    height:20px;
    position:fixed;
    top:0px;
    right:0px;
    left:0px;
} 
#div2 {
    position:absolute;
    top:20px;
    bottom:0px;
    right:0px;
    left:0px;
}

也许这就是你需要的......

编辑抱歉误读了标题..更正：如果您希望拥有多个div2，那么您可能需要一个像

这样的结构

<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>

Answer 2

有一种简单的方法：将第一个div（20px）放在第二个div中。

编辑：由于我的第一个答案不是您的选项，您可以使用脚本来动态调整div的大小。您可以计算document.height - 20px并将结果应用为“100％”div的高度。 CSS没有提供办法：

height: 100% - 20px

然而，Javascript确实：

（通过jQuery：）

$( "#big_div" ).height( $( document ).height() - 20 );

Answer 3

我尝试了这个，在你的div中添加了一些示例文本，并且仅仅通过不给第二个div高度去掉滚动条，并允许broswer（IE和FF）自己弄清楚是什么很高兴给它。

但是，鉴于你对乔治的评论，我认为这也许不是你的解决方案。也许你可以发布一些你的代码（或伪代码）来给出至少一个替换第二个div的典型例子。

Answer 4

如果您可以提供固定宽度，则可以不使用任何Javascript：

http://jsfiddle.net/mNNeq/47/

以下是帮助您定位内容的绝佳资源：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

HTML固定div与相对div

4 个答案: