100％身高列

我創建了一個響應式佈局，你可以在這裏找到：http://pixelcakecreative.com/cimlife/responsive/100％身高列

左，右列是簡單的一個部位皮膚（左，右整頁廣告）的佔位符。我需要將這兩列擴展到頁面的最底部。 html和body的高度均爲100％，但由於某些原因，我無法將這些列擴展到底部min-height:100%

任何想法？我正在尋找一個純粹的CSS解決方案，但jQuery是一個選項。

2011-11-18 JCHASE11

他們只顯示瀏覽器寬度1206 px +，FYI – JCHASE11

jQuery的解決辦法是：

// Set Left Column ONLY if Shorter than Document Height // 
if ($('#toLeft').height() < $(document).height()){ 
    $('#toLeft').css('height', $(document).height()+'px'); 
} 

// Set Right Column ONLY if Shorter than Document Height // 
if ($('#toRight').height() < $(document).height()){ 
    $('#toRight').css('height', $(document).height()+'px'); 
}

我希望這有助於！

來源

2011-11-18 21:48:53 dSquared

這是一個很好的解決方案。最有可能最終會使用這個，除非我可以挖掘一個CSS解決方案！ – JCHASE11

我試過這個（目前生活），它似乎沒有正常工作。它修改高度，但不是100％。看一看，有什麼想法？ – JCHASE11

我看到它在右欄上工作，但不是左欄;請給我一點時間仔細看看。 – dSquared

你必須使用clearfix：http://www.webtoolkit.info/css-clearfix.html這是純CSS

來源

2011-11-18 21:47:44

有一個clearfix已經在我的css中使用一類.group。我試着將這兩個列添加到列中，然後它們消失 – JCHASE11

然後，只需使用jquery - > @dSquared –

UGG ..是的怪癖。我通常使用$（文檔）.height（）作爲該stuf。身高通常只與內容所需要的一樣高，所以100％不起作用。

來源

2011-11-18 21:48:15 Bram

您還需要將height: 100%添加到所有父div，而不僅僅是html或body。

這應該可以解決您的網站：

#toLeft, #colA, body { 
    height: 100% 
}

來源

2011-11-18 21:54:53

html, body { 
    height: 100%; 
    margin: 0; 
}

而且

#your-container { 
    height: 100%; 
}

對我來說這一個工作。

來源

2013-11-20 09:14:39 iChaiwut

回答

相關問題