Question

我试图让一个盒子100％高度的页面。但是在Chrome和IE浏览器中，以下内容从页面底部延伸了几个像素，因此我必须滚动。为什么？为什么这里有滚动条？

  <!doctype html>
  <html >
  <head>
    <style type="text/css">
        html, body 
        {
            margin: 0px;
            padding: 0px;
            height: 100%; 
        }
        div {
            border:5px solid black;
            height: 100%;
        }
    </style>
  </head>
  <body >
    <div >This flows a few pixels off the bottom of the page</div>
  </body>
</html>

Answer 1

它会离开页面几个像素，因为您包含5px边框。 div的正文是页面高度的100％，但border位于其外部，在页面旁边加上10％的总高度和100％的高度。因此，在1000px页面上，div的高度将为1010px。删除边框，它将是正确的高度。

div {
    height: 100%;
}

如果您仍然想要边框，但不想要不需要的额外高度，可以使用box-sizing: border-box属性将其放置在div的边界内

div {
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Answer 2

......这是另一种选择：

html,body 
{
    height:100%;
    margin:0;
    padding:0
}
div
{
    border:5px solid black;
    display:block;
    height:-moz-calc(100% - 10px);
    height:-webkit-calc(100% - 10px);
    height:calc(100% - 10px);
    width:calc(100% - 10px)
}

享受！

Answer 3

您可以通过声明所有主流浏览器的border-box属性来保持当前设置为5px边框：

div
{
    height:100%;
    box-sizing:border-box !important;
    -moz-box-sizing:border-box !important;
    -webkit-box-sizing:border-box !important;
}

由于您处理100％div大小，强烈推荐添加！important ，因此您不会与其他人发生任何冲突属性。

100％的高度离页面几个像素？

3 个答案: