Question

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

请告诉我怎么做？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

通常你有一个固定的标题和一个固定的页脚高度。

在这种情况下，我在css中执行类似的操作

height：calc（100％ - / FotterHeight / px - / headerHeight / px）;

Answer 2

将标题设置为高度，并从总高度计算页脚和标题

.yellow {
  background-color: yellow;
  height: calc(100vh - 130px);
}

.gray {
  background-color: gray;
  height: calc(100vh - 130px);
}

.blue {
  background-color: blue;
  height: 50px;
}

Answer 3

在这里你可以使用javascript。只需添加正文标记下方即可。但你必须给头部一个高度，并从总高度减去它; headerHeight下面没有定义;

<script>
var headerHeight = document.getElementById("headerHt"),
    totalHeight = document.getElementById("page-content"),
    classGray = document.querySelector(".gray"),
    classYellow = document.querySelector(".yellow");

classGray.style.height = classYellow.style.height = totalHeight.clientHeight - headerHeight.style.height + "px";

</script>

如何在div上设置100％的高度？

3 个答案: