3

以下のhtmlとcssを見てください。#wrapperの幅を990ピクセルに設定し、中央の列の完全な幅は960ピクセルです。15pxのマージンが両側にあります。したがって、ラッパーdivの背景色は#leftおよび#contentdivの後ろに表示されるはずです。ただし、＃wrapperの高さを設定すると、背景が表示されます。しかし、私はそれがいっぱいとして表示されることを望みます。

私はCSSレイアウトの初心者です。

<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:100%;
background:#efffff;
height:100px;
}
#footer{
margin:0 auto;
clear:both;
width:100%;
background:#ccc;
height:100px;
}
#wrapper{
width:990px;
margin:0 auto;
background:#000;
display:block;
}
#left{
margin:0 0 0 15px;
background:#eeffee;
width:200px;
float:left;
}
#content{
margin:0 15px 0 0;
background:#eeeeee;
width:760px;
float:left;
}
</style>
</head>
    <body>
        <div id="header">
            header
        </div>
        <div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content">
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
            </div>
        </div>

        <div id="footer">
            Footer
        </div>
    </body>
</html>
4

3 に答える 3

3

ラッパーには浮動要素が含まれているため、これらの要素を「クリア」する必要があります。そうしないと、ラッパーが要素をラップしません。これを行うには複数の方法がありますが、最も受け入れられている方法は、ラッパーでclearfixクラスを使用することです。

次のコードをcssに追加します。

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

次にclass="clearfix"、<div id="wrapper">要素にを設定します。したがって、次のようになります。

<div id="wrapper" class="clearfix">

この特定のソリューションは、マイクロクリアフィックスハックとして知られています。詳細については、 http：//nicolasgallagher.com/micro-clearfix-hack/を参照してください。

結果を表示するjsfiddleは次のとおりです。http： //jsfiddle.net/PWQru/1/

また、同じ質問に答えるいくつかの以前の質問を見てください。EG 「clearfix」のどのメソッドを使用できますか？

その質問には、さまざまな方法についていくつかの良い議論があります。

于 2012-07-13T13:22:07.393 に答える
0

高さを追加：100％; 左へ 。

結果のスタイルは

#left 
{
    background: none repeat scroll 0 0 #EEFFEE;
    float: left;
    height: 100%;
    margin: 0 0 0 15px;
    width: 200px;
}

お役に立てれば。

于 2012-07-13T13:20:43.927 に答える
0

これは、コンテンツと左のdivがフロートしているためです。ラッパーがこれらの2つのdivをカバーするようにするには、両方のフロートdivの最後にdivを導入する必要があります。

<div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content"></div>   
    <div style="clear:both;"></div>
</div
于 2012-07-13T13:22:55.183 に答える