Question

无论用户的屏幕如何，我都想建立一个全高的网站。滚动是不可能的，所有内容都显示在页面中。我试过像：

<body>
  <div class="header">
    test
  </div>
  <div class="central">
    test
  </div>
  <div class="footer">
    test
  </div>
</body>

html,body{
  height:100%;
}
.header,.footer{
    height: 20%;
  background-color:blue;
}
.central{
    min-height:60%;
  background-color:red;
}

它可以在我的屏幕上以高分辨率工作但不在我的15“中，页面可滚动。如果正文限制为100％，为什么所有元素都不在页面中？ JSFIDDLE

感谢。

Answer 1

因为正文已内置margin。

删除它。

正常CSS Reset通常会将此作为标准。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  /* see? */
}
.header,
.footer {
  height: 20%;
  background-color: blue;
}
.central {
  min-height: 60%;
  background-color: red;
}

＆＃13;

<body>
  <div class="header">
    test
  </div>
  <div class="central">
    test
  </div>
  <div class="footer">
    test
  </div>
</body>

＆＃13;

Answer 2

我认为这是因为身体有利润。试试：

html,body { 
  height:100%; 
  min-height:100%; 
  max-height:100%; 
  margin:0px;
  padding:0px; 
}

Answer 3

将min height设置为html标记并删除默认边距，填充到body标记

html{  
    min-height:100%;
}

body{

    padding: 0;
    margin: 0;
    min-height:100%;
    width: 100%;
    height: 100%;

}

CSS整页高度内容

3 个答案: