Question

如何在CSS2中执行height: calc(100% - 18px);？我在页面上有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标准的浏览器。

Answer 1

您可以在box-sizing: border-box旁边添加负边距和填充。

注意：在下面的示例中，我使用50px代替200px，而200px对于代码段输出来说有点太大了。您希望使用-50px和50px更改-200px和200px的实例，以获得所需的输出。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS2版本的高度：计算（100％ - 18px）

1 个答案: