html - 如何使内容div的高度成比例？

Question

我有以下 html:

<div id=wrapper>
  <header>
  ...
  </header>

  <div id=content>
  ...
  </div>

  <footer>
  ...
  <footer>
</div>

CSS:

html, body {
  height: 100%;
}
#wrapper {
  height: 100%;
}
header {
  height: 50px;
}
#content {
  height: 80%;
  overflow: scroll;
}
footer {
  height: 50px;
}

我想让<header>和 <footer>总是出现，而且是content div根据窗口的高度调整大小。

但是使用上面的CSS，如果窗口的高度低于某个高度，<footer>将超出页面。如何解决？

Answer 1

一种选择是使用calc()，支持IE 9 +

内容 div 被赋予 height: calc(100% - 150px)。即页面高度的 100% 减去页眉和页脚的高度。 overflow-y: auto 将滚动内容 div 以防止内容溢出。

关于浏览器兼容性的说明:IE 8 及以下版本不会为内容 div 提供高度。根据您的需要，这可能不是问题。作为后备，您还可以为内容 div 提供一个百分比高度，高于计算高度，这样 IE 8 及更低版本将具有非优化高度。

可以看到浏览器列表support over here .

Read more about calc over on the MDN

CSS/HTML/演示

html, body {
    height: 100%;
    margin: 0;
}
#wrapper {
    height: 100%;
}
header {
    height: 50px;
    background: #9c27b0;
}
#content {
    height: calc(100% - 150px);
    background: #f8bbd0;
    overflow-y: auto;
}
footer {
    height: 100px;
    background: #e91e63;
}

<div id="wrapper">
    <header></header>
        <div id="content"></div>
    <footer></footer>
</div>