Question

我正在使用应覆盖洞身区域的背景图像。此外，我想在底部粘一个粘性页脚。现在我的主要问题是背景图像在100％的body-element之后停止（滚动之后）。但是背景图像应该覆盖孔区域 - 我可以说它应该具有主体的宽度（不仅仅是没有孔宽度并且居中的内容）和内容的高度可能超过100浏览器高度的百分比。

我尝试了以下代码：

HTML

<body>
        <div id="backgroundWrapper">
            <div id="wrapper">
                <header>
                    ...
                </header>
                <article>
                    ...
                </article>
                <footer>
                    ...
                </footer>
            </div>
        </div>
</body>

CSS

html, body {
        height: 100%;
    }

    div#backgroundWrapper {
        min-height: 100%;

        background: url('/images/bodyBackground.jpg') no-repeat;
        background-position: center;
        background-size: cover;
    }

    div#backgroundWrapper > div#wrapper {
        position: relative;

        width: 1024px;
        min-height: 100%;

        margin: 0 auto;
    }

div#wrapper > footer {
        position: absolute;

        width: 100%;
        height: 115px;

        bottom: 0;
    }

虽然我给了背景包装的最小高度：100％，但内包装也有最小高度：100％不适合高度（因为它的位置是相对的），所以粘性页脚不在如果内容很小，窗口底部。

你能帮帮我吗？这是JSFiddle：http://jsfiddle.net/bfd2d/

编辑：如果我在内包装之后移动页脚，使其成为背景包装的直接子项，但如果页脚是内包装的子项，那就好了，因为我不要再给它包装，然后再将它放在中心位置。

使用带有粘性页脚的背景大小的封面

0 个答案: