Question

我试图通过一些填充来抵消身体标记。但是，我想调整主体，使其不会落在浏览器窗口下方并引发滚动条。

HTML：

<body> </body>

CSS：

html, body {
 height: 100%;   
}

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

理想情况下，我想从身体的高度减去20em。有没有这样做，没有任何Javascript和所有浏览器支持的方式（Internet Explorer除外）？感谢。

Answer 1

这取决于。你可以使用border，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;
}

Answer 2

如果您定位的是主流浏览器的当前版本，那么您很幸运！这甚至可以在IE9上工作（参见full support table）：

html {
 height: 100%;   
}

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

Answer 3

我会做像

这样的事情

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