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

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

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!