0

私は本当にシンプルなウェブページを持っています。

私のCSSタラ：

#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
}

#left {
float : left;
width : 790px;
margin-left : 10px;
background-color : green;
}

#right {
float : left;
width : 280px;
margin-left : 10px;
background-color : darkgreen;
}

HTML :

<div id ="bodyPart">
    <div id ="left"></div>
    <div id ="right"></div> 
</div>

min-height プロパティには、パディング、ボーダー、またはマージンは含まれません! しかし、「左」が長くなったときに「bodyPart」を長くするにはどうすればよいですか:S:Sこれに対する解決策はありますか:S

4

2 に答える 2

0

と一緒にheightの#bodyPartを作りますautomin-height

#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
height:auto;
}

次に、divを追加してクリアします

HTML

 <div id ="bodyPart">
    <div id ="left"></div>
    <div id ="right"></div> 
    <div class="clear"></div>
 </div>

CSS

.clear {clear:both;}
于 2013-10-15T06:45:46.263 に答える
0

まず、min-heightパディング、マージン、またはボーダーとは関係ありません。次に、親のサイズが大きくなると、各要素を（もちろん高さで）長くすることができます。

そのためには、パーセンテージの高さを使用する必要があります。これを言いましょう：

div {
  min-height: 90%;
}

このように、この div は90%親の を埋めます (この場合body、他のコンテナーがない場合)。

また、divが互いに何を関係しているのか理解できません。だから判断が難しい。ただし、パーセンテージを使用して親 div のスペースを埋めることができます。このように、ブラウザのサイズが変更されると、要素のサイズが変更され、スペースが埋められます。

あなたの場合、leftそれは子であり、bodyPart親であると推測しています（左が親の中にあることを意味します）。このためには、JS で子の高さを取得してから、親の高さを設定する必要があります。コードに何らかのスクロールがある場合は、それらを削除すると、子がスクロールするときに親の高さが確実に高くなります!

div {
 overflow-x: none; // for the parent
}

もっと教えてください :) だから私はあなたを助けることができます.

于 2013-10-15T06:39:57.097 に答える