Div高度的CSS麻煩

我想設置我的環繞div的大小至少是頁面的高度，然後根據內容進行調整，如果它重疊。Div高度的CSS麻煩

我現在所擁有的是min-height:100%;，但是當內容超過它時，這不會超過頁面高度。

解決此問題的最佳方法是什麼？

編輯：這是我的相關CSS。

#wrapper{width:1000px;min-height:100%;margin:0px auto;background:#F2F2F2;} 

header{width:1000px;height:50px;margin:0px auto;} 

h1#logo{float:left;margin:5px 5px 0px;padding:0px;font:bold 30px 'Russo One', sans-serif;line-height:32px;} 
h1#logo a, h1#logo a:visited{text-decoration:none;color:#005883;} 
h1#logo a:hover, h1#logo a:visited:hover{color:#BAE5E9;} 
img#logo-badge{vertical-align:middle;margin:-3px -5px 0px -10px;} 


nav{float:right;font:20px 'Lato', sans-serif;} 
nav ul{float:right;margin:0px;padding:0px;list-style:none;} 
nav li{float:left;} 
nav li:hover{} 
nav a, nav a:visited{height:100%;padding:0px 20px 0px;display:block;text-decoration:none;color:#FFFFFF;} 
nav a:hover, nav a:visited:hover{background:;color:#BAE5E9;} 

#content{min-height:100%;float:left;margin:0px auto;} 

#main-content{width:700px;min-height:100%;float:left;padding:0px 15px;} 
#main-content h1{color:#515151;margin:0px;padding:0px;border:1px solid #515151;border-top:0px;border-right:0px;border-left:0px;} 

#demo-src{border-top:1px solid #D7C7B2;border-bottom:1px solid #D7C7B2;text-align:right;} 
#sidebar{width:270px;min-height:100%;float:left;} 

#footer{width:100%;float:left;}

來源

2012-04-09 justanotherhobbyist

你試圖讓橫跨屏幕的高度一個div，或者是你嘗試與另一格匹配起來？如果你能夠確切地說明你想要做什麼，我想我們可以幫助你更好。 – saluce 2012-04-09 18:51:57

我認爲*你必須使用'html，body {height：100％;}'才能工作。 – bfavaretto 2012-04-09 18:51:57

我已經有HTML和正文100％，這是奇怪的事情，@saluce，我想要外部div包裝所有內容，現在內部divs中的文本溢出它，我希望它與他們一起成長。 – justanotherhobbyist 2012-04-09 18:54:39

有您的問題。 #content是向左浮動的，它允許它流到容器div的邊界之外。查看this Stack Overflow question瞭解如何解決該問題的詳細信息。

該問題的建議答案是使用jQuery EqualHeights插件或使用Equal Height Columns作爲CSS解決方案。

來源

2012-04-09 19:03:38 saluce

是的，你是對的。 Thx將會看看那裏的答案。 – justanotherhobbyist 2012-04-09 19:08:04

答案應該是自成一體的。讀者不應該參考其他SO答案才能看到解決方案。請通過在您自己的答案中發佈完整的相關解決方案來修復它。 – Sparky 2012-04-09 19:32:39

我在谷歌上發現了一些更容易的東西，http：// nicolasgallagher.com/micro-clearfix-hack/解決了它的問題。直到現在，從來沒有理解使用clearfix。 – justanotherhobbyist 2012-04-09 20:02:42

嘗試在它設置一個最大高度，如果不工作嘗試使用只是高度和寬度

來源

2012-04-09 18:50:25

問題是高度差異太大。你的意思是設置像max-height：5000px？ – justanotherhobbyist 2012-04-09 18:52:19

如果高度變化到那個程度，那麼是 – 2012-04-09 18:53:23

嘗試過，沒有任何改變。 – justanotherhobbyist 2012-04-09 18:55:15

如果別人運行到同樣的問題，我發現這個簡單的clearfix http://nicolasgallagher.com/micro-clearfix-hack/

來源

2012-04-09 20:01:17 justanotherhobbyist

Div高度的CSS麻煩

回答

相關問題