-1

私は絶対的な高さの値を使用してサイトを開発してきましたが、なぜheight:autoうまくいかないのか興味がありました。

HTML 構造

<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>

CSS

#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}

#menuconatiner{
margin:5px;
float:left;
width:190px;}
4

2 に答える 2

1

次の CSS を使用すると、height 属性はもう必要ありません。

#reviews-content {
  display: table;
}

div の高さが自動拡張されない理由は、div に浮動要素が含まれているためですが、clearfix を使用していないためです。これは役に立つリンクかもしれません:

上記の私の解決策で問題が解決するかもしれませんが、将来的には clearfix を使用することをお勧めします。

于 2013-08-31T15:09:20.013 に答える
0

OPの以前のコメントで述べたように、問題は両方の子要素divがフローティングされているためです。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。親には子要素が含まれていないため、機能しheight: autoません (実際には機能しますが、効果はありません)。

オプション 1:float: left on "review-container" を削除するheight: autoと、期待どおりに動作しますが、JrnDel のコメントに記載されているように、これにはいくつかの影響があります。

オプション 2 (ベスト): OP の自分のコメントと、この回答のコメントの JrnDel の両方で言及されているように、clearfix div を追加できます。

于 2013-08-31T15:15:30.953 に答える