Make body have 100% of the browser height
I want to make body have 100% of the browser height. Can I do that using CSS?
I tried setting
height: 100%, but it doesn’t work.
I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.
As an alternative to setting both the
body element’s heights to
100%, you could also use viewport-percentage lengths.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value
100vh - which is the height of the viewport.
This is supported in most modern browsers - support can be found here.