100％min-height wrapper break background

我在提供導航欄背景的包裝器上有重複背景。它應該一直延伸到頁面。我曾希望通過將包裝的最小高度設置爲100％來實現這一點。當我這樣做時，背景消失。有誰知道爲什麼？100％min-height wrapper break background

這裏的網站：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; 
}

來源

2012-11-05 Josh Infiesto

我用'溢出：汽車;' – Aprillion

嗨，您已在您的child elements中使用floating而不是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-05 05:56:48

每當父元素通常崩潰，你需要使用一個clearfix劈死修復

http://css-tricks.com/snippets/css/clear-fix/有好的人把這個類複製到你的樣式表中，並在你的包裝類旁邊使用它，如class="wrapper clearfix"

這浮子使包裝崩潰#navbar {float:left}

來源

2012-11-05 01:27:59 Grundizer

添加下面的DIV CLASS = 「內容」下面的HTM/CSS：

HTML：

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

CSS：

.clear-fix { 
   clear: both; 
}

來源

2012-11-05 01:37:32

100％min-height wrapper break background

回答

相關問題