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  How to Modify the URL without reloading the page

About the author

Wikitechy Editor

Wikitechy Editor

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.

X