html - 如何下推身体并改变其高度？

Question

我试图通过一些填充来抵消身体标签。但是，我想调整正文，以免它掉到浏览器窗口下方并引起滚动条。

这是我要完成的一个示例：http: //jsfiddle.net/jM9Np/1/

HTML：

<body> </body>

CSS：

html, body {
 height: 100%;   
}

body {
 margin-top: 20em;
 background-color: LemonChiffon;
}

理想情况下，我想从身体的高度中减去 20em。无论如何，是否可以在没有任何 Javascript 的情况下以所有浏览器（Internet Explorer 除外）支持的方式执行此操作？谢谢。

score 2 · Accepted Answer

这取决于。您可以使用边框，f.ex：

html {
  height: 100%
}

body {
  border-top: 20em solid #fff;
  background-color: LemonChiffon;
}

但恕我直言，最好的方法是在正文中添加另一个 DIV 并将其绝对定位：

html, body {
  height: 100%
}

div {
  position: absolute;
  top: 20em;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: LemonChiffon;
}

score 0 · Accepted Answer

如果您的目标是当前版本的主流浏览器，那么您很幸运！这甚至应该在 IE9 上工作（参见完整支持表）：

html {
 height: 100%;   
}

body {
 margin-top: 20em;
 height: calc(100% - 20em); 
 background-color: LemonChiffon;
}

score 0 · Accepted Answer

我会做类似的事情

html{
height: 100%; 
background-color:black;
}
body {
height:80%;
margin-top: 20%;
background-color: LemonChiffon;
}

3 回答 3