Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Make <body> to Have 100% of the Browser Height

Topic: HTML / CSSPrev|Next

Answer: Set Height for Both <body> and <html> Elements

Simply setting the height of the <body> element to 100% will not have any effect, because percentage (%) height is based on the height of the parent element which is the <html> element. Therefore, we will also have to set the height of the <html> element to 100% to make it work.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Set body Height to 100% of the Browser Window</title>
<style>
    html {
        height: 100%;
    }
    body {
        margin: 0;
        background: yellow;
        min-height: 100%; /* height grows if content grows */
    }
</style>
</head>
<body>
    <div>Some dummy content...</div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates