[Solved – 3 Answers] Set Html body have 100% of the browser height

PROBLEM :
When we tried to set html body have 100% of the browser height. Is It possible to do that using CSS?

• We tried setting height: 100%, but it doesn’t work.
• When we tried to set a background color for a page to fill the entire browser window, but if the page has little content then we got a unwanted white bar at the bottom.

SOLUTION 1 :

• If you want to keep the margins on the body and don’t want scroll bars, use the following css:

html { 
	height:100%; 
	}
body { 
	position:absolute;  top:0; bottom:0; right:0; left:0; 
}

• Setting  html body  height {min-height:100%} will give us scroll bars.

SOLUTION 2 :Here you can 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 it’s height set as well.
• However the content of body will probably need to change dynamically. Setting  html body height min-height to 100% will accomplish this goal.

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

SOLUTION 3 ;

• If you have a background image then you will want to set this instead:

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

• This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down.
• Remember if you have to support IE6 then you will need to find a way to wedge in height:100% for body, IE6 gives height like min-height anyway