Html CSS2版本高度：计算（100%-18px）_Html_Css

Html CSS2版本高度：计算（100%-18px）

html css

Html CSS2版本高度：计算（100%-18px）,html,css,Html,Css,我如何做高度：计算（100%-18px）在CSS2中？我在一页上有3个div <body> <div id="top">top</div> <div id="middle">middle</div> <div id="bottom">bottom</div> </body> 顶部中间的底部我希望top为100%高度减去200px 我希望middle位于200px的

我如何做

高度：计算（100%-18px）在CSS2中？我在一页上有3个div

<body>
    <div id="top">top</div>
    <div id="middle">middle</div>
    <div id="bottom">bottom</div>
</body>


顶部
中间的
底部


我希望top
为100%高度减去200px
我希望middle
位于200px
的正下方top
我希望bottom
紧跟在bottom

当滚动条位于最顶端时，top
和middle
占据浏览器窗口的100%，但用户应该能够向下滚动查看bottom
。当用户滚动top
和bottom
时，大小仍然相同（除非用户调整窗口大小）
我想在不使用JavaScript的情况下实现这一点，它需要CSS2，因为我们还没有兼容CSS3的浏览器。
您可以在框大小：边框框
旁边混合使用负边距和填充
注意：在下面的示例中，我使用了50px
而不是200px
，因为200px
对于代码段输出来说太大了一点。您需要将-50px
和50px
的实例更改为-200px
和200px
，以获得所需的输出

html，正文{
身高：100%；
保证金：0；
}
#顶{
背景：番茄；
框大小：边框框；
身高：100%；
边缘底部：-50px；
填充底部：50px；
}
#中间的{
背景：矢车菊蓝；
高度：50px；
}
#底部{
背景：番木瓜；
}
顶部
中间的
底部
您确定吗？部分由IE9支持，完全由IE10支持。这很好。非常感谢。