CSS整页高度内容

无论用户的屏幕是什么,我都想建立一个全高的网站.滚动是不可能的,所有内容都显示在页面中.我尝试过类似的东西:

  

    test
  
  

    test
  
  

    test
  


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

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

谢谢.

因为身体内置了margin.

只需删除它.

正常的CSS重置通常会将此作为标准.

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

  

    test
  
  

    test
  
  

    test