CSS height HTML

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

[solved – 3 Answers] HTML - CSS - html body height -When we tried to make body have 100% of the browser height. Is It possible to do that


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.

  • If you want to keep the margins on the body and don’t want scroll bars, use the following css:
css code
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.

Here you can try setting the height of the html element to 100% as well.

css code
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.
css code
html {
  height: 100%;
}
body {
  min-height: 100%;
}

  • If you have a background image then you will want to set this instead:
css code
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
READ  [Solved - 10 Answers] CSS 100% height with padding/margin

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment