1

JSFiddle に投稿された次のコードに次の問題があります: http://jsfiddle.net/b9XVV/1/

HTML

<div class="content">
    <div class="header">THGE HEADER OF THE PAGE</div>
    <div class="thebody">
        HERE GOES THE CONTENT OF THE PAGE......
    </div>
    <div class="footer">
        <div class="footerContent">
            <div class="footer1">Footer section</div>
            <div class="footer2"></div>
        </div>
    </div>
</div>

CSS 

.header {
        width:100%;
        height:50px;
        background-color:#FFFF58;
    }
    .thebody {
        width:500px;
        height:400px;
        margin:0 auto;
        background-color:#DDD;
    }
    .footer {
        width:500px;
        height:50px;
        background-color:#696969;
        margin:0 auto;
    }
    .footerContent {
        width:500px;
        height:50px;
    }
    .footer1 {
        width:400px;
        height:50px;
        float:left;
    }
    .footer2 {
        width:100px;
        height:50px;
        float:left;
        background-color:#FFddFF;
        position:fixed;
        right:0;
    }

問題は、ピンクの Div を常にフッターに配置し、右側に固定する必要があることですが、ウィンドウの幅が本体の幅にピンクの Div の幅を加えたものよりも小さい場合、ピンクの Div をメイン フッターの左側 (500px 幅) に配置する必要があります。

もう 1 つの問題は、コンテンツをスクロールすると、ピンクの div が常にフッターの同じレベルに留まる必要があることです。

4

1 に答える 1

2

CSS:

.footer2 {
    width:100px;
    height:50px;
    background-color:#FFddFF;
}
@media all and (max-width: 649px){
    .footer2 {
        position: inline;
        float: right
    }
}
@media all and (min-width: 650px){
    .footer2 {
        position:fixed;
        right:0;
        bottom: 0;
    }
}

デモ: http://jsfiddle.net/b9XVV/2/
メディア クエリの互換性を見る: http://caniuse.com/#feat=css-mediaqueries主な問題 (該当する場合) は IE8 です。

于 2013-04-22T11:40:10.427 に答える