标题和背景图像固定内容和页脚滚动

时间:2013-08-07 04:59:59

标签: header scroll fixed

我为我的问题Fiddle设置了一个小提琴。我的要求是什么?我需要仅修复标题和背景图像。内容应滚动,页脚也应滚动内容。

CSS

body{
    margin: 0;
}

header{
    height: 50px;
    background: black;
    width: 100%;
}

section{
   background: url(http://dummyimage.com/600x400);
    height: 400px;
    repeast: no-repeat;
}

footer{
    height: 50px;
    background: black;
    position: fixed;
    width: 100%; 
}

.clearfix{
    width: 960px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid #fff;

}

HTML

<header></header>
<section>
    <div class="clearfix">
        What my requirement is? I want the footer and background image to be position fixed and the footer should be scrolling with the large content.
    </div>
</section>
<footer></footer>

谢谢你们。

1 个答案:

答案 0 :(得分:2)

使用overflow:scroll;滚动您的内容

.clearfix{
    width: 960px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid #fff;
    overflow:scroll;
}

您可以在div中编写页脚,这将使用内容滚动页脚