How to set CSS body to 100%

How to set 100% for the CSS body element

In web development, there are often requirements for the overall layout style of the page, and adjusting the style of the body element is particularly important. A common requirement is to make the body element’s height and width fill the entire browser window, achieving a full-screen effect. This article details how to use CSS to set the body element’s height and width to 100%.

Setting the body element’s height to 100%

To make the body element fill the entire browser window, first ensure that the height of both the HTML and body elements is 100% to avoid insufficient height. Usually we will add the following code in CSS:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

In the code above, we set the height of the html and body elements to 100% and set both margin and padding to 0 to avoid the browser’s default spacing.

Next, we can set the body element’s height to 100% with the following code:

body {
height: 100%; 
} 

This ensures that the body element’s height fills the entire browser window.

Set the body element’s width to 100%

To make the body element fill the entire browser window, we also need to ensure that the width of the html and body elements are also 100%. We can use the following code to set this:

html, body {
width: 100%;
margin: 0;
padding: 0;
}

Similarly, we set the width of the html and body elements to 100% and set both margin and padding to 0 to ensure they are not affected by the browser’s default styles.

Next, we can set the width of the body element to 100% using the following code:

body { 
width: 100%; 
}

This ensures that the width of the body element fills the entire browser window.

Combined settings for the height and width of the body element to 100%

If we want both the height and width of the body element to fill the entire browser window, we can use the following code:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
box-sizing: border-box;
}

Here, we set the height and width of both the html and body elements to 100%, and set both margin and padding to 0. In addition, we’ve added the box-sizing: border-box; style to specify the element’s width and height, including borders and padding, to prevent the element from not fully filling the browser window due to borders and padding.

With these settings, we can ensure that the height and width of the body element fill the entire browser window.

Summary

This article demonstrated how to use CSS to set the height and width of the body element to 100% to achieve a full-screen display. By setting the height and width of the html and body elements to 100% and setting margins and padding to 0, we ensure that the body element completely fills the browser window. Furthermore, using the box-sizing: border-box; style prevents the element from not fully filling the browser window due to borders and padding.