-2

In html I have a container in the body to contain every element and I want it to take up the whole height of the page.

When I make the height 100% it only sets it to the size needed to contain the elements, so I have to apply 100vh to the height for it to work. How can I make setting the height to 100% work?

Minion3665
  • 879
  • 11
  • 25
FNER
  • 29
  • 5
  • 1
    doesn't work how? can you provide [mcve] and explain the expected vs actual output – depperm Oct 08 '21 at 15:12
  • by doesn't work I mean it only occupies the space it needs and not the entire height of the page. – FNER Oct 08 '21 at 15:13

1 Answers1

4

The html and body elements themselves don't have 100% height, so setting the height of something in them to 100% doesn't work. You need to set the html and body elements to 100% as well

html, body {
    height: 100%;
}
Minion3665
  • 879
  • 11
  • 25
  • for the container 100% means 100% of the height of its parent, but for the html element what does 100% mean? – FNER Oct 08 '21 at 15:16
  • 1
    @FNER setting the html element's height to 100% sets it to 100% of the browser window's height – Minion3665 Oct 08 '21 at 15:17