2

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

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

HTML:

<body> </body>​

CSS:

html, body {
 height: 100%;   
}

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

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

4

3 回答 3

2

这取决于。您可以使用边框,f.ex:

html {
  height: 100%
}

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

http://jsfiddle.net/jM9Np/10/

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

html, body {
  height: 100%
}

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

http://jsfiddle.net/za4e3/

于 2012-09-13T22:05:39.853 回答
0

如果您的目标是当前版本的主流浏览器,那么您很幸运!这甚至应该在 IE9 上工作(参见完整支持表):

html {
 height: 100%;   
}

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

http://jsfiddle.net/jM9Np/3/

于 2012-09-13T21:51:04.233 回答
0

我会做类似的事情

html{
height: 100%; 
background-color:black;
}
body {
height:80%;
margin-top: 20%;
background-color: LemonChiffon;
}
于 2012-09-13T21:56:17.750 回答