CSS DOM問題 - 無法找到財產被覆蓋的原因

有問題的網站是1000freewebsites.com。我掙扎的特定頁面：CSS DOM問題 - 無法找到財產被覆蓋的原因

1000freewebsites.com/signup.php
1000freewebsites.com/login.php

本網站使用的框架結構和Ryan既成事實的粘頁腳。在這些頁面上，我有一個ID爲#bluestripe的div，它應該填充頁眉和頁腳之間的垂直空間。

有三個父元素; #html，#body和.wrapper。所有設置爲高度：100％;在樣式表中。 #bluestripe也設置爲高度：100％，最小高度：100％。據我瞭解，這應該達到我想要的效果。我的理論錯了嗎？

使用Chrome Inspector我發現height屬性被劃掉.wrapper。如果我的理論是正確的，這就解釋了爲什麼#bluestripe沒有擴展到填充垂直空間。

我找不到任何超過騎乘.wrapper高度設置的元素。你能看到我缺少的東西嗎？

來源

2013-05-20 Bonnie Shull

這是你的CSS：

.wrapper { 
min-height: 100%; 
height: auto !important; //height here 
margin: 0 auto -40px; 
height: 100% ;//height again here 
}

要定義高度的兩倍，並作爲第一個拿到!important其覆蓋第二個

這項事業的另一個錯誤，因爲填充和其他元素推.container格下來，所以如果你改變一些屬性，你可以擺脫這種行爲：

#bluestripe { 
background: #0099cc; 
width: 100%; 
padding: 40px 0px 40px 0px; 
border-top: 10px solid #666666; 
/*height: 100%; drop this line*/ 
} 

.wrapper { 
background: #0099cc; /*add this line*/ 
min-height: 100%; 
margin: 0 auto -40px; 
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/ 
}

這將使.bluestripe再次縮小，但由於.wrapper仍然具有相同的背景色，所以不重要

來源

2013-05-20 03:53:34

您的用於.wrapper的CSS規則有2個高度聲明。擺脫一個設置高度自動。

.wrapper { 
    min-height: 100%; 
    height: auto !important; /* <- Get rid of this one */ 
    margin: 0 auto -40px; 
    height: 100%; 
}

來源

2013-05-20 03:54:39 thefrontender

這樣做會產生兩個新問題：1）div現在延伸到視口下方，創建滾動效果2）粘性頁腳中斷。你可以在1000freewebsites.com/signup.php看到這個。它遲到了，所以我要去睡覺，睡在這。任何有關如何既保留粘腳，並有一個完整的高度內容div的見解，非常感謝。 –

@ BonnieShull看看我的編輯 –

感謝您的編輯:-)不幸的是，這將不起作用，因爲1）我有其他頁面上的不同彩色背景的內容div和每個頁面上的.wrapper。我已經考慮過專門爲這些頁面創建一個.wrapper類，但是我使用了一個模板系統，並且開始變得混亂。 2）#bluestripe中的元素需要在頁面上垂直對齊，所以我需要這個容器div爲全高。我開始認爲jQuery粘腳可能是我唯一的解決方案，這讓我很難過。 –

CSS DOM問題 - 無法找到財產被覆蓋的原因

回答

相關問題