Javascript CSS整页高度内容_Javascript_Jquery_Html_Css

Javascript CSS整页高度内容

javascript jquery html css

Javascript CSS整页高度内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想建立一个全高的网站，无论用户的屏幕。滚动是不可能的，所有内容都显示在页面中。我试过这样的方法： <body> <div class="header"> test </div> <div class="central"> test </div> <div class="footer"> test </div> </body> html,body{

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

<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;
}


测试
测试
测试
html，正文{
身高：100%；
}
.页眉，.页脚{
身高：20%；
背景颜色：蓝色；
}
中环{
最小高度：60%；
背景色：红色；
}

它在我的屏幕上以高分辨率工作，但在我的15英寸页面上却不能。如果正文被限制为100%，为什么所有元素都不在页面中？

谢谢。

因为车身内置了

边距
把它拿走
正常人通常会将此作为标准

html，
身体{
身高：100%；
保证金：0；
/*看到了吗*/
}
.标题，
.页脚{
身高：20%；
背景颜色：蓝色；
}
中环{
最小高度：60%；
背景色：红色；
}

测试
测试
测试
我想这是因为正文有边距。试试：
html,body { 
  height:100%; 
  min-height:100%; 
  max-height:100%; 
  margin:0px;
  padding:0px; 
}

将最小高度设置为html标记，并删除默认边距，将填充设置为正文标记
html{  
    min-height:100%;
}

body{

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

}

在应用您自己的CSS之前，您需要重置CSS，因为浏览器将默认边距应用于body
。在这种情况下，您可以将margin:0；
应用于body
，但最好使用常规CSS重置，例如@leroydevbody
标记具有margin
，而不是padding
>我强烈反对使用常规重置，因为一些默认值实际上并不坏，并且在ul
上没有例如填充
（由于重置）你将看不到项目前面的子弹等…检查此@sidneylebrand哈哈抱歉，修复了它，周五下午呵呵..请在你的答案中添加详细信息，以便OP和未来的读者能够理解为什么这是问题的答案谢谢。我跟随了你的链接并重新设置了CSS