CSS html and body containers aren't stretching to content's height

StackOverflow https://stackoverflow.com/questions/22844050

Question

I've been reading a lot of entries to figure out why my content won't force the body and html tags to stretch to 100% of the inner content's height.

My page is here: http://truerenaissance.devmu.com/artisthighlight/

You'll see the background image (set on the body tag) is not stretching to 100% of the page or inner content's height. I am only using position: relative everywhere. I'm also using a 'clearfix' at the bottom of the content. If anyone has any ideas as to why this is happening, I'd really appreciate it.

html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; }
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75);
        padding: 0px; z-index: 10; }
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; }
.clear:before,
.clear:after {
    content:"";
    display:table;
}
.clear:after {
    clear:both;
}
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; }

<html>
  <body>
    <div id="body-wrapper">
      <div id="site-wrapper">
       <div class="inner">
       </div>
      </div>
    </div>
  </body>
</html>

Thanks!

Was it helpful?

Solution

Well you constrained the body height to the viewport height and you didn't stretch the background vertically. Remove height: 100% from html and body and use background-size's cover value.

Thanks for the big-ass picture by the way.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top