Search code examples
htmlcssheightdocument-body

Background cut off with html and body 100% height

I can't get html and body to have 100% height for some reason and I'm pulling my hair out trying to find out why. I'm using the following code and have scoured the web and Stackoverflow for answers, but nothing seems to be working:

html, body {
  height: 100%;
  min-height: 100% !important;
  width:100%;
  padding:0;
  margin:0;
  line-height:normal;
}

Here's a live demo:

http://dev1.onesizeup.com/

Any idea what's going on?

Solution

  • Setting height: 100% on html forces its height to be that of the viewport (causing that cutoff). Try setting html's height to auto or removing html from the html, body rule.