私は、一連の div を子として持つ div ホルダーを持っています。問題は、コンテンツがその子のコンテンツに応じて高さによって可変であるため、ホルダー div 自動調整の css プロパティをその子の高さの合計に設定するにはどうすればよいですか?
min-height、padding:auto などの div ホルダー css の構成をいくつか試しましたが、成功しませんでした。
ここにコードを配置しました:http://jsfiddle.net/nuAQY/
ありがとう。
私は、一連の div を子として持つ div ホルダーを持っています。問題は、コンテンツがその子のコンテンツに応じて高さによって可変であるため、ホルダー div 自動調整の css プロパティをその子の高さの合計に設定するにはどうすればよいですか?
min-height、padding:auto などの div ホルダー css の構成をいくつか試しましたが、成功しませんでした。
ここにコードを配置しました:http://jsfiddle.net/nuAQY/
ありがとう。
childdiv
の高さを削除するだけです。
高さを宣言すると、コンテンツが何であっても常にその高さになると言っているので、コンテンツが変更されても、子の高さは変更されないため、ホルダーの高さは変更されません。
.holder {
width:250px;
min-height:50px;
border:1px solid #EDEDED;
}
.header {
width:100%;
}
.body {
width:100%;
}
.footer {
width:100%;
}
</p>
clear というクラスを作成し、最後の div 子の後に配置しますが、まだホルダーに配置します。
そのようです:
.clear { width: 100%; height: 0px; clear: both; display: block; }
それから...
<div class="holder">
<div class="child"></div>
<div class="child"></div>
...
<div class="child"></div>
<div class="clear"></div>
</div>
問題は、すべての DIV に高さを設定したことですが、コンテンツがその高さを超えているため、不足しています。高さを削除するかoverflow:auto
、これらの DIV ごとに設定する必要がありますが、スクロールバーが表示されます。余分なコンテンツを非表示にする場合は、使用できますoverflow: hidden