Question

我尝试将内容容器填充到100％的高度，同时拥有30px标头。但是目前，内容容器大于100％会产生滚动条。

代码

＆＃13;

html {
  padding:0;
  margin: 0;
  height:100%;
}
body {
  padding:0;
  margin: 0;
  height:100%;
}
#header {
  height: 30px;
  background: black;
  width: 100%;
  position: absolute;
  z-index: 2;
}
#container {
  position: relative;
  height:100%;
  padding-top:30px;
  background-color: #aaaaaa;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="header"></div>
    <div id="container"></div>
  </body>
</html>

＆＃13;

演示：https://plnkr.co/edit/48SJjl9dB7S7IiC8JLcP?p=preview

实现这一目标的正确方法是什么？如果可能，我甚至更愿意将标题定位在相对的位置。而不是绝对的。但可能这不可能吗？

Answer 1

您可以尝试进行这些更改：

#container{
  height: calc(100% - 30px);
  padding-top: 0;
}

您可以删除这两个元素的position属性，因为static在这里可以正常使用。

Plunk

您要将content元素设置为height: 100%，这意味着它将占用父元素的可用全高（在本例中为body）。但是header也是body的孩子，而你的高度为30px。 100％+ 30px将超过可用的全高，因此您的滚动条。添加padding-top也只会增加这个多余的高度。

完整代码

＆＃13;

html{
  padding:0;
  margin: 0;
  height:100%;
}

body{
  padding:0;
  margin: 0;
  height:100%;
}

#header{
  height: 30px;
  background: black;
  width: 100%;
  position: relative;
}

#container{
  position: relative;
  height: calc(100% - 30px);
  background-color: #aaaaaa;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div id="header"></div>
   <div id="container"></div>
  </body>

</html>

＆＃13;

Answer 2

这里的问题是div.container不仅存在于身体中，还有#header，其高度为30px，这个高度是从100％高度计算出来的，这意味着当前身高是100％+ 30px; 所以容器高度也是100％+ 30px;

您只需将容器高度更改为

即可

height: calc(100% - 30px);

Answer 3

你有填充顶部：30px;在你的容器上，它进一步延伸。尝试添加box-sizing：border-box;所以你的填充物不会拉伸你的容器，而是会调整内侧的大小。

Answer 4

我已经对此进行了测试，效果非常好：

    #container{  
      display:block;
      height:100%;  
      background-color: #aaaaaa;
    }

高度为100％的容器比整个页面大

4 个答案: