0

まだデザインのこちら側には触れていないので、現在、自分用の一般的なレスポンシブテンプレートを作成しています。

約600pxにサイズ変更すると、「Content Div」に問題が発生します（問題の場所が正しい場合は、赤い境界線が表示されます）。静的な高さを2300pxに設定しても、コンテンツdivが拡張されなくなるため、コンテンツは外側に浮くだけで、コンテンツdivは拡張されません。

 @media only screen   
and (max-width : 603px) {  


/* Styles */  
#column_wrapper img {margin-left:25.33%;padding-right: 20%;}
#column1_content{height:500px;}
#column2_content{height:500px;}
#column3_content{height:500px;}
#column_wrapper{border:1px solid red;height:300px;float: left;}
#content{height:2300px;margin-top: 100px;margin-bottom: 20%;}

}

このサイトはレスポンシブテンプレートにあります

4

3 に答える 3

2

この問題は、フロート要素がコンテナー ボックス内にある場合に発生します。その要素は、コンテナーの高さをフロート要素に合わせて自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。

div#content use clearfix の代わりに高さを指定する必要はありません。これはそれを修正します;）

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

 html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
于 2012-12-11T17:21:09.167 に答える
0

div＃contentで静的な高さを使用しないでください。overflow：hiddenのみを使用してください。＃column1_content、＃column2_content、＃column3_contentの静的な高さも削除します

関連：http ：//www.quirksmode.org/css/clearing.html

于 2012-12-11T17:14:45.513 に答える
0

中の要素が浮いているからです。要素をフロートさせると、その要素がコンテンツフローから削除されます。これは、これらの要素がdivをプッシュして、コンテンツで展開しないことを意味します。

于 2012-12-11T17:16:52.463 に答える