CODEWITHSUNDEEP
htmlcss
Roel
Roel

Reputation: 3

How do I make the body element extend to the size of the html element?

I want the body extend as the page gets bigger. I tried making the height of the body 100% and the height of the html element 100% and it didn't work as expected:

The blue represents the body and the red the html element

I want it that the body covers the whole html element. This is what I have as code in css:

html {
font-family: Palatino, 'Palatino Linotype', serif;
background-color: red;
height: 100%;
margin: 0;
padding: 0; 
}
body {
background-color: blue;
height: 100%;
margin: 0;
padding: 0;
}

I hope someone can help me!

Upvotes: 0

Views: 1176

Answers (2)

Matt Reynolds
Matt Reynolds

Reputation: 477

If you want an element to be the size of the browser window, you can use vh instead of %, which sets the element to the height of the viewport (there is also vw which sets it to the viewport width).

body {
  height: 100vh;
}

Don’t set a height attribute on the html element, just set it on the body (which should contain all of your visible elements).

Upvotes: 0

Soban
Soban

Reputation: 434

Instead of changing the height to 100%, try changing it to height: auto; This automatically adjusts the height to the content inside it.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.

Hope it helps

Upvotes: 2

Related Questions