header - 页眉和背景图像固定内容和页脚滚动

Question

我为我的问题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>

多谢你们。

Answer 1

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

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

您可以在 div 中写入页脚，这将滚动页脚内容