All geek questions in one place

Is 100% height a few pixels from the page?

I am trying to make a box at 100% of the page height. But in both Chrome and IE, the following text extends a few pixels from the bottom of the page, so I need to scroll. What for? Why is there a scrollbar here?

  <!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>
+4
source share
3 answers

It displays several pixels on the page because you include a 5 pixel border. The body divis 100% of the page height, but borderis outside of this, adding a total height of 10 pixels per page along with a height of 100%. So, on a 1000px page, the height of your div will be 1010px. Remove the border and it will exactly match the height.

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

... :

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

!

+2

You can save the current settings with a 5px border by declaring the border-box property for all major browsers:

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

Since you are dealing with a 100% div size, it is recommended to add ! important so that you do not encounter other properties.

+1
source

Source: https://habr.com/ru/post/1606326/

More articles:


All Articles