CSS高度100％問題

我知道有很多關於css 100％高度問題的問題。但是我試圖按照指示那裏，仍然高度不是100％，所以我想我會再次問這個問題。CSS高度100％問題

在這裏你可以看到問題的網站是：

www.exendo.be

一些CSS樣式：

html { 
    height: auto !important; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
} 

body { 
    background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8; 
    height: auto !important; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
    width: 100%; 
} 

wrapper { 
    height: auto !important; 
    min-height: 100%; 
    position: relative; 
} 
footer-container { 
    background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40; 
    height:146px; 
}

正如你可以在網站上看到的，頁腳是頁面上太高。如果我用Firebug檢查頁面，我可以看到html是100％高度，但body標籤不是。這個問題都發生在Firefox和IE上。

如果有人能幫上忙，那太棒了！

來源

2011-06-30 denappel

我覺得這個article可以幫到你。

根據這篇文章：

分配「的立場：相對」你的「容器」 DIV - 頁面，頁面容器或包裝類（我不知道到這三個中的一個，只是嘗試），然後「位置：絕對;底部：0;」到你的「頁腳容器」分區。

我希望能幫到你。

來源

2011-06-30 11:57:45

@denappel;給html & body 100% height把footer外main div wrapper &根據頁腳的高度給minus邊緣底部。

CSS：

.wrapper { 
    position: relative; 
    width: 700px; 
    font-size: 0.9em; 
    margin: 0 auto -142px; 
    background:yellow; 
} 
.header { 
    height: 190px; 
    background:green; 
} 

.footer { 
    position: relative; 
    width: 700px; 
    margin: 0 auto; 
    background:red; 
} 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; 
.footer, .push { 
    height: 142px; 
}

檢查這個例子 http://jsfiddle.net/sandeep/tCdPX/3/

這個功能稱爲stickyfooter

來源

2011-06-30 12:20:22 sandeep

感謝您的提示。我已經嘗試了這一點（你可以在exendo.be上查看它），但由於某種奇怪的原因，它並沒有工作。我已經刪除了保證金：0 auto -142px;因爲其他的頁腳甚至更高。全高還沒有使用，我不知道爲什麼...... – denappel

一些人建議的位置是：絕對的;底部：0;

如果內容比容器高，這可能會導致問題。高度不會增加，因此內容將不再適合，並可能被切斷或導致難看的滾動條。

如果您可以給容器一個固定的高度，這是理想的，因爲高度：100％將對子元素起作用。如果內容太大，您可以將背景放置在父級上可見的子級上，因此內容仍會顯示。這有所幫助，但是如果孩子的寬度與父母的寬度相同，它仍然可以中斷。

如果這不起作用，我建議在em或像素中使用最小高度。這將確保高度填充父項，並在內容太長時擴展。這對最好的客戶評論www.baka.ca

來源

2013-03-28 16:15:10

CSS高度100％問題

回答

相關問題