让我的包装div元素全高

Question

我需要将wrapper div元素设置为全高，因此根据页面的整个高度调整其高度，以便不显示滚动条。

我的HTML：

<header>
  I am the header and my height is fixed to 40px.
</header>

<div id="wrapper">
  I am the wrapper
</div>

我的css：

html,body {
  height: 100%;
  background: blue;
  margin: 0;
  padding: 0;
}
header {
  height: 40px; <-------- this value is fixed 
  background-color: green;
}
#wrapper {
  height: 90%;
  background-color: red;
}

我知道height: 90%上的wrapper错了，但我不知道该怎么办。

这是jsFiddle：https://jsfiddle.net/3putthcv/1/

Answer 1

您可以使用CSS calc()：

#wrapper {
  height: calc(100% - 40px); /* 40px is the header value */
  background-color: red;
}

JSFiddle

---

或display:table/table-row：

html,
body {
  height: 100%;
  width: 100%;
  background: blue;
  margin: 0;
  padding: 0;
}
body {
  display: table;
  width: 100%;
}
header {
  display: table-row;
  height: 40px;
  background-color: green;
}
#wrapper {
  display: table-row;
  height: 100%;
  background-color: red;
}

<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>

JSFiddle

Answer 2

如何根据top，left，right和bottom这样设置尺寸（demo）（全面披露，它赢了'如果内容为too large），则无效：

#wrapper {
background-color: red;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}