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宽度）

另一个问题是滚动内容时，粉红色的 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 回答