Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make body have 100% of the browser height

Tags:

html

css

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.

like image 243
bodyofheat Avatar asked Jul 11 '11 18:07

bodyofheat


People also ask

How do I make my page 100% height?

For a responsive full page height, set the body element min-height to 100vh. If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.


1 Answers

Try setting the height of the html element to 100% as well.

html,  body {     height: 100%; } 

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

html {   height: 100%; } body {   min-height: 100%; } 
like image 165
BentOnCoding Avatar answered Oct 08 '22 17:10

BentOnCoding