让div占据100％的身高，减去固定高度的页眉和页脚

  • Z时代
  • 2024-01-10
  • 分类：问答

从我的研究来看，这似乎是一个绝对经典的CSS问题，但我找不到确切的答案-所以是StackOverflow。

如何将内容div设置为占主体高度的100％，减去固定高度的页眉和页脚所占的高度？

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>
//CSS
html, body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height, minus header & footer
}

我想使用纯CSS，并且答案在所有浏览器中都是防弹的。

回答：

这个版本将在所有最新的浏览器工作，IE8，如果你有Modernizr的脚本（如果不只是改变header和footer成divS）：

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}
#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#content {
  min-height: 100%;
  background-color: green;
}
header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}
footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}
p {
  margin: 0;
  padding: 0 0 1em 0;
}
<div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div>

以上是 让div占据100％的身高，减去固定高度的页眉和页脚 的全部内容， 来源链接： utcz.com/qa/426225.html

回到顶部