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 上方提供CR高度的百分比高度，以便IE 8及更低版本具有非优化高度。

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

Read more about calc over on the MDN

CSS / HTML / Demo

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>

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

1 个答案: