html - 页眉和页脚之间的 div 垂直 100%

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

您需要这样设置容器的尺寸:

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

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