ネストされたdivがあり、メインコンテナを拡張して(高さを)内部のdivを収容する必要があります。
<!-- head -->
...
<!-- /head -->
<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>
<div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>
<div id="footer">
</div>
</body>
</html>
CSS は次のとおりです:
* {
padding: 0;
margin: 0;
}
.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}
.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}
私が抱えている問題は、#main_content
すべての内部 div を収容するために拡張されないため、結果として内部 div が背景に逆らって表示され続けることです。
上記のシナリオを考慮して、この問題をどのように解決すればよいでしょうか?
ベストアンサー1
clear:both
div が閉じられる前にを強制する必要があります。 を divに移動し、CSS を次のように設定すると#main_content
思います。<br class="clear" />;
#main_content
.clear { clear: both; }
更新:この質問はまだかなりのアクセス数を獲得しているので、私は答えを最新の代替案で更新したいと思いました。CSS3の新しいレイアウトモードはFlexible BoxまたはFlexboxと呼ばれます。:
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #3F51B5;
color: #fff;
}
section.content {
flex: 1;
}
footer {
background-color: #FFC107;
color: #333;
}
<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>
<section class="content">
Content
</section>
<footer>
<h4>
Footer
</h4>
</footer>
</div>
現在、ほとんどの最新ブラウザはフレックスボックスそしてビューポート単位ただし、古いブラウザのサポートを維持する必要がある場合は、特定のブラウザ バージョンの互換性を確認してください。