JS and CSS

body{
height:100%;
Background-image:url (./img/background.png);
}

Body width Broken Screen size class set to height:100%;

#div1 {box-sizing:border-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding : 20px;}
#div2 {box-sizing:content-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding : 20px;}
</style>

<div id= "Div1" >border-box</div>
<div id= "Div2" >content-box</div>
<script>

Box-sizing:border-box;  is CSS3 new property, to understand this property, we start with the box size of the block-level element, usually a block-level element actually occupies a wide height = margin (margin) + boundary width (border-width) + padding (padding) + height (height)/ Widths (width)
If Border-box is set, the actual occupied width = Height set (height)/set width (width) + margin (margin)

The border and padding plenary in the width you set for the interior

-moz on behalf of the Firefox browser private properties
-ms for IE browser private properties
-webkit represents Chrome, safari private properties

function A () {
document.write (
"Screen resolution is:" +screen.width+ "*" +screen.height
+ "<br/>" +
"Screen Available size:" +screen.availwidth+ "*" +screen.availheight
+ "<br/>" +
"width of page visible area:" +document.body.clientwidth
+ "<br/>" +
"Page visible Area High:" +document.body.clientheight
+ "<br/>" +
"width of the visible area of the page (including the width of the edge):" +document.body.offsetwidth
+ "<br/>" +
"The visible area of the page is high (including the width of the edge):" +document.body.offsetheight
+ "<br/>" +
"Page body Full text width:" +document.body.scrollwidth
+ "<br/>" +
"Page body Full text High:" +document.body.scrollheight
+ "<br/>" +
"The page was rolled High:" +document.body.scrolltop
+ "<br/>" +
"The webpage was rolled away left:" +document.body.scrollleft
+ "<br/>" +
"On the body part of the webpage:" +window.screentop
+ "<br/>" +
"Page body part left:" +window.screenleft
+ "<br/>" +
"High screen resolution:" +window.screen.height
+ "<br/>" +
"Width of screen resolution:" +window.screen.width
+ "<br/>" +
"Screen usable workspace height:" +window.screen.availheight
+ "<br/>" +
Screen available work area width: +window.screen.availwidth
);
};

Let body height follow screen size

JS and CSS