1

我在为导航栏提供背景的包装器上有一个重复的背景。它应该一直延伸到页面下方。我曾希望通过将包装器的最小高度设置为 100% 来实现这一点。当我这样做时，背景消失了。有谁知道为什么？

这是网站：https ://hodkiewicz-zieme-and-hirthe180.myshopify.com/

这是相关的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;
}
4

3 回答 3

1

每当您浮动元素时，父元素通常会崩溃，您需要使用 clearfix hack 来修复它

http://css-tricks.com/snippets/css/clear-fix/有一个很好的复制类到你的样式表，并在你的包装类旁边使用它class="wrapper clearfix"

这个浮动使包装器崩溃 #navbar {float:left}

于 2012-11-05T01:27:59.697 回答
1

在 div class="content" 下面添加以下 htm/css：

HTML：

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

CSS：

.clear-fix {
    clear: both;
}
于 2012-11-05T01:37:32.140 回答
1

嗨，您floating在您child elements的clear父母中使用过，wrapper div所以这就是问题出现的原因，因此clear您的父母wrapper div有overflow:hidden;问题会解决。

使用下面提到的 CSS 更新您的 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;
}
于 2012-11-05T05:56:48.323 回答