Why doesn't the body stretch to the full height of the content?

Question

css

I can’t understand why in this example the body is not stretched to the full height of the content, but is cut off, dragging the sticky header along with it. Please tell me why this is happening. I need the body to stretch to the full height of the screen, and if there is more content, then stretch to the height of the content.

Answer 1

Because the body is set to 100% html, and it is also set to 100%, which are counted from the viewport. The solution is:

html {
  height: 100%;
}
body {
  min-height: 100%;
}