2012-04-09 22 views
0

私のラッピング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;} 
+0

あなたは、画面の高さにまたがるのdivを作成しようとしている、またはあなたが別のdivでそれを一致しようとしているこの単純なclearfixを見つけましたか?あなたが何をしようとしているのかを明確にすることができれば、私はあなたをより良く助けることができると思う。 – saluce

+0

I * think *あなたは 'html、body {height:100%;}'を使って動作させる必要があります。 – bfavaretto

+0

私はすでに100%にhtmlとbodyを持っています。それは賢いものです。@saluce、外側のdivがすべてのコンテンツを囲むようにしたいのですが、今度は内部のdivのテキストがオーバーフローしてしまいます。 – justanotherhobbyist

答えて

2

を使用してみた場合、その上で最大の高さを設定してみてください。 #contentは左に浮動しているため、コンテナdivの境界の外側に流れます。それを修正する方法の詳細については、this Stack Overflow questionをご覧ください。

この質問の回答は、jQuery EqualHeightsプラグインを使用するか、またはCSSソリューションにEqual Height Columnsを使用することでした。

+0

そうですね。 Thxはそこの答えを見ます。 – justanotherhobbyist

+0

アンサーは、単独で立つために自己完結型である必要があります。読者は解決策を見るために他のSOの回答を参照する必要はありません。あなた自身の答えで完全な関連する解決策を投稿することによってそれを修正してください。 – Sparky

+0

Googleでもっと簡単なものが見つかりました。http://nicolasgallagher.com/micro-clearfix-hack/解決済みです。今までclearfixの使用を理解していません。 – justanotherhobbyist

0

そのdoesntの仕事は、あなたの問題がありますだけで、高さと幅

+0

高さの変動が大きすぎるという問題があります。あなたはmax-height:5000pxのような設定を意味しますか? – justanotherhobbyist

+0

高さがその程度まで変わった場合は –

+0

試しましたが、変更はありません。 – justanotherhobbyist