问CSS2版本的高度: calc(100% -18 of )
EN

Stack Overflow用户

提问于 2017-10-09 13:54:07

回答 1查看 716关注 0票数 3

如何在height: calc(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的浏览器。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-09 14:06:29

你可以用负的边距和与box-sizing: border-box一起填充的混合方式来实现这一点。

注意:在下面的示例中，使用了50px而不是200px，因为对于片段输出来说200px有点太大了。您将希望用-50px和50px的实例来更改所需的输出的-200px和200px。

html, body {
  height: 100%;
  margin: 0;
}

#top {
  background: tomato;
  box-sizing: border-box;
  height: 100%;
  margin-bottom: -50px;
  padding-bottom: 50px;
}

#middle {
  background: cornflowerblue;
  height: 50px;
}

#bottom {
  background: papayawhip;
}

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46648169

复制

相似问题

问CSS2版本的高度: calc(100% -18 of )
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2版本的高度: calc(100% -18 of )EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2版本的高度: calc(100% -18 of )
EN