7

ヘッダーを静止させ、残りのコンテンツをその下にスクロールさせようとしています。これを達成することはできますが、2 つのヘッダー div に固定位置を設定すると、マージン auto から抜け出します。

CSS:

.structure {
    width:960px;
    padding:20px;
    margin:0px auto 0px auto;
    background:#121212;
    border-left:5px #F06BA8 solid;
    border-right:5px #F06BA8 solid;
}
.header_home_structure {
    width:960px;
    margin:0px auto 0px auto;
    position:fixed;
    height:80px;
}
.header_home_bg {
    width:100%;
    background:#121212;
    border-bottom:3px #F06BA8 solid;
    height:80px;
    position:fixed;
}

html:

<body>
    <div class="header_home_bg clearfix">
        <div class="header_home_structure clearfix">
            </div>
        </div>
    <div class="structure clearfix">
    </div>
</body>
4

1 に答える 1

5

コンテナ div で使用するだけposition: fixedで、2 回使用しないでください

デモ

.structure {
    width:960px;
    padding:20px;
    margin:0px auto 0px auto;
    background:#121212;
    border-left:5px #F06BA8 solid;
    border-right:5px #F06BA8 solid;
}
.header_home_structure {
    width:960px;
    margin:0px auto 0px auto;
    height:80px;
}
.header_home_bg {
    width:100%;
    background:#121212;
    border-bottom:3px #F06BA8 solid;
    height:80px;
    position:fixed;
}
于 2012-12-19T06:06:56.067 に答える