100％最小高度包装破坏背景

Question

I have a repeating background on a wrapper that provides the background for the nav-bar. It should extend all the way down the page. I had hoped to accomplish this just by setting the min-height of the wrapper to 100%. When I do this, the background disappears. Does anyone know why?

Here's the site: https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

Here's the relevant CSS:

.wrapper {
    width: 940px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    background-image: url({{'body-bg.png' | asset_url}});
    background-repeat: repeat-y;
}

Answer 1

Anytime you float elements the parent element usually collapses you need use a clearfix hack to fix that

http://css-tricks.com/snippets/css/clear-fix/ has a good one copy the class into your style sheet and use it next to your wrapper class like class="wrapper clearfix"

This float is making the wrapper collapse #navbar {float:left}

Answer 2

Add below the div class="content" the following htm/css:

HTML:

<div class="content">...</div>
<div class="clear-fix"></div>

CSS:

.clear-fix {
    clear: both;
}

Answer 3

Hi you have used floating in your child elements not clear your parent wrapper div so that's why the problem is coming so clear your parent wrapper div with overflow:hidden; problem will sort out.

UPDATE YOUR CSS WITH MENTIONED BELOW CSS

CSS

.wrapper {
    background-image: url("http://static.shopify.com/s/files/1/0098/1262/t/107/assets/body-bg.png?2789");
    background-repeat: repeat-y;
    margin: 0 auto;
    min-height: 100%;
    overflow: hidden;
    text-align: left;
    width: 940px;
}