Question

我一直在寻找这个问题的答案但没有找到任何答案。我搜索了堆栈溢出和其他资源。之前已经问过这个问题，我已经尝试了他们每个人的答案。

如何让div占据页眉和页脚之间100％的垂直距离？

这是我的代码：

HTML

<div class="page-wrap">
 <header>This is the header</header>
  <div id="container">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="main">Main</div>
 </div>
 </div>
<footer class="site-footer">
 I'm the Sticky Footer.
</footer>

CSS

/* * {
margin: 0;
} */
html, body {
  width: 100%;
  height: 100%;
  margin:0;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -80px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
 height: 80px;
 }
.site-footer {
background: #265a88;
}

#left{
 text-align:center;
 color:white;
 background-color: black;
 height: auto !important;
 height: 100%;
 border: black dash;
 float: left;
 width: 20%;
 min-height:100%;
 overflow: scroll;

 }

 #right{
  min-height:100%;
  text-align:center;
  color:white;
  background-color: black;
  height: 100%;
  float: right;
  width: 20%;

  }

  #main{
  text-align:center;
  color:white;
  background-color: blue;
  height: 100%;
  border: black dash;
  float: right;
  width: 60%;
  max-height:100%;
  overflow: scroll;
  }

  header{
  background-color: #265a88;
  color:white;
  text-align:center;
  padding:5px;
  }

Answer 1

为了让子元素占据父母高度的100％，父母必须具有设定的高度（即不能是百分比）。这适用于除body标记之外的所有子元素，其父级为html，而设置为100％的html确实为子元素提供了设置的像素高度。最简单的解决方法是使用一些javascript来计算给定父元素的高度，然后相应地设置子元素。我不知道任何纯css解决方案，不需要一些摆弄线高等属性。据我所知，对于Web开发人员来说，这是一个非常普遍的问题，而且这个问题实际上取决于您使用的技术的灵活性以及黑客攻击您希望自己的CSS看起来。

Answer 2

您需要设置容器的尺寸：

#container{
   height: 100%
   width: 100%
   position: absolute;
}

但是，在您的情况下，您必须设置容器的高度，使其不会溢出并越过页脚。

页眉和页脚垂直之间的div 100％

2 个答案: