0

ラッピング div のサイズを少なくともページの高さに設定し、重複する場合はコンテンツに応じて調整しようとしています。

私が今持っているのは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;}
4

3 に答える 3

2

あなたの問題があります。 #content左にフローティングしているため、コンテナー div の境界の外に流れることができます。それを修正する方法の詳細については、このスタック オーバーフローの質問を参照してください

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

于 2012-04-09T19:03:38.390 に答える
0

他の誰かが同じ問題に遭遇した場合、私はこの単純な clearfix を見つけましたhttp://nicolasgallagher.com/micro-clearfix-hack/

于 2012-04-09T20:01:17.353 に答える
0

最大高さを設定してみてください。うまくいかない場合は、高さと幅だけを使用してみてください

于 2012-04-09T18:50:25.530 に答える