0

私は CSS と HTML を初めて使用します。フロート要素の高さに関して 1 つの問題があります。

「コンテンツ」divの高さを「メイン」divの高さ以上に設定すると、フッターのマージン上部が正しく表示されますが、コンテンツdivの高さを自動に変更するとすぐに、マージンフッターの上部が機能していません。コンテンツの高さを自動にするが、フッターの余白を尊重するソリューションがあることを本当に知りたいです。私を助けてください。あらゆる種類のクリアフィックス、オーバーフローなど、すべてを試しました。

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="sidebar"></div>
        <div id="main"></div>
    </div>
    <div id="footer"></div>
</div>

#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
4

3 に答える 3

1

プロパティを使用しoverflow:hiddenます。

「overflow: hidden」は、フロートの封じ込めの目的でよく使用されます。ただし、より特別なことを行うことができます。要素のマージンがその子と一緒に折りたたまれるのを防ぎ、要素が隣接する浮動要素の「後ろ」に広がるのを防ぎます。

出典: 「overflow: hidden」の魔法</a>

#content{
    width:800px;
    height:auto;
    background:#999;
    overflow:hidden;
}

jsFiddle を参照してください

于 2013-09-16T09:51:03.777 に答える
0

セットアップの問題は、 を に設定するとheight、その高さが実際にはゼロに計算されることです。これは、純粋に浮動要素が含まれているためであり、 の高さを計算するときに無視されます。#containerauto#container#container

#contentこれを修正するには、他のコンテンツの後にclearfix を追加します。例えば：

<div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
    <div class="clearfix"></div>
</div>

CSS:

.clearfix { clear: both }

ここで動作することがわかります: http://jsfiddle.net/Mzxjs/

于 2013-09-16T09:48:37.570 に答える