Question

我在包装器上有重复的背景，为导航栏提供背景。它应该一直延伸到页面下方。我希望通过将包装器的最小高度设置为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;
}

Answer 1

无论何时浮动元素，父元素通常会崩溃，您需要使用clearfix hack来修复

http://css-tricks.com/snippets/css/clear-fix/可以很好地将该类复制到您的样式表中，然后在您的包装类旁边使用它，例如class="wrapper clearfix"

此浮动正在使包装器折叠#navbar {float:left}

Answer 2

在div class =“content”下方添加以下htm / css：

HTML：

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

CSS：

.clear-fix {
    clear: both;
}

Answer 3

您好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;
}

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

3 个答案: