页眉和背景图像固定内容和页脚滚动答案

【问题标题】：Header and Background Image Fixed Content and Footer scrolling页眉和背景图像固定内容和页脚滚动
【发布时间】：2013-08-07 04:59:58
【问题描述】：

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

谢谢大家。

【问题讨论】：

“页脚也应该随内容滚动”是什么意思？你想在最后粘页脚或页脚吗？
嗨，我希望页脚位于最后。
只删除位置：为页脚固定。它会在你的部分之后
背景重复：不重复；背景位置：固定中心；背景尺寸：封面；这将修复您的图像
好的让我试试谢谢...

标签： header scroll fixed

【解决方案1】：

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

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

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

【讨论】：