html - 如何在 div 上设置 100% 高度？

Question

我需要使用类 .gray 和 .yellow block 的 div 为内容高度的 100%，即页眉和页脚之间 100% 可能的高度。

请告诉我怎么做？

Example :

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

#page-content {
  min-height: 100%;
  margin-bottom: -80px;
}

#page-buffer {
  height: 80px;
}

footer {
  height: 80px;
  background: #f00;
}

.yellow {
  height: 100%;
  background-color: yellow;
}

.gray {
  background-color: gray;
  height: 100%;
  
}

.blue {
  background-color: blue;
}
.h100{
  height: 100%;
}

<div id="page-content">
  <header class="blue">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 ">
          some header
         
        </div>
      </div>
    </div>
  </header>
  <div class="container  h100">
    <div class="row  h100">
      <div class="col-sm-8 gray same">
        Lorem ipsum dolor sit amet.
      </div>
      <div class="col-sm-4 yellow same">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consectetur, recusandae sapiente! Beatae facilis cupiditate, a iure officiis alias quibusdam.
      </div>
    </div>
  </div>
  <div id="page-buffer"></div>
</div>

<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        some footer
      </div>
    </div>
  </div>
</footer>

Answer 1

通常您有固定的页眉和固定的页脚高度。

在这种情况下，我在 css 中做了类似的事情

高度:计算(100% -/FotterHeight/px -/headerHeight/px);