設置Div 100％身體

我有一個名爲「主容器」的div，我想成爲我的內容的高度。目前，div只和我的瀏覽器窗口一樣高。我試圖糾正這樣的：設置Div 100％身體

html, body{ 
    height: 100%; 
    background-color: $main-background-color; 
} 

#main-container { 
    width: 1024px; 
    height: 100%; 
    background-color: darken($main-background-color, 5%); 
}

不幸的是，這是行不通的。我也試過：

#main-container { 
    width: 1024px; 
    min-height: 100%; 
    height:auto !important; 
    background-color: darken($main-background-color, 5%); 
}

這也沒有效果。我也重寫了我的佈局，不使用浮動，但這並沒有解決問題。在淘網之後，我還沒有找到任何其他可行的解決方案。其他人有沒有想法？

另外，我不知道這是否會影響到的東西，但我用Rails 3

來源

2012-07-07 nullnullnull

嗯你的CSS是目前，應該工作。（但也許這些變量產生一些內容，搞砸了css語法??或者稍後重寫＃main-container？或者你需要清除瀏覽器緩存（可能不是） – BjarkeCK 2012-07-07 01:51:46

當我檢查Chrome或Firebug中的元素時，它告訴我，我的主CSS文件的高度被設置爲100％，看起來沒有任何干擾，但是我發現了一部分（儘管不能接受）修復。高度設置正確，不幸的是，它會導致滾動條出現問題，不過，我會繼續試驗這個，可能會導致解決方案 – nullnullnull 2012-07-07 05:51:45

在你#main-container div的底部，插入下面的代碼：

<div id="push"></div>

然後在您的CSS中添加以下內容：

#push { 
    clear:both; 
}

這應該將整個容器推到內容的高度，而不管浮動div。

來源

2012-07-07 01:50:47

奇怪的是，這並不起作用，即使我將所有浮動元素從我的佈局，高度仍然不能正確設置，但正如我在上面的評論中指出的那樣，當我設置'overflow：auto'或'overflow：hidden'時，高度會設置正確 - 儘管它也會導致問題隱藏的內容或不需要的滾動條。 – nullnullnull 2012-07-07 05:57:04

@tbaron在這種情況下，嘗試'overflow：visible;' – 2012-07-07 06:02:28

不幸的是，當我設置'overflow：visible'時，它不再修復高度。 – nullnullnull 2012-07-07 06:14:38

嘗試在html/body上設置min-height:100%而不是height，因爲height:100%將限制其大小到視口。然後，您的main-container應該能夠在高於視口時拉伸它。

html, body{ 
    min-height: 100%; 
    background-color: $main-background-color; 
} 

#main-container { 
    width: 1024px; 
    background-color: darken($main-background-color, 5%); 
}

來源

2012-07-07 07:43:58

我可能會誤解你正在努力完成的事情。但如果你想要的只是你的div是內容的高度，那麼根本就不要聲明一個高度......

html, body{ 
    background-color: $main-background-color; 
} 

#main-container { 
    width: 1024px; 
    background-color: darken($main-background-color, 5%); 
}

來源

2012-07-07 08:51:32 Theo

結合您的提示與Spiritfyre的回答，我能夠讓網站正常工作。感謝您的建議！ – nullnullnull 2012-07-07 13:07:57

設置Div 100％身體

回答

相關問題