覆盖浏览器窗口的背景图像减去首屏下方的页眉和页脚答案

【问题标题】：Background image covering browser window minus header and footer below the fold覆盖浏览器窗口的背景图像减去首屏下方的页眉和页脚
【发布时间】：2011-01-25 10:58:58
【问题描述】：

标题可能有点混乱，我会尽力解释我需要实现的目标。基本上我对特定网页有以下元素：

标题 - 在内容上方始终可见
内容 - 背景图片覆盖整个内容区域 - 这是关键部分
子页脚 - 有关内容的信息始终在其下方可见
页脚 - 标准公司页脚，如果窗口高度为一定大小则可见，否则需要向下滚动才能看到它

正如我上面提到的，页面的内容部分可能是最棘手的部分。我需要一个大图像在背景中覆盖整个区域。 css-tricks 有一个excellent guide in the ways to do full page background images。所以我希望这可以很容易地实现。问题是如果窗口小于 720 像素且其下方的页脚位于折叠下方（需要您滚动到它），如何使子页脚保持在底部。 >720px 的窗口应该同时显示子页脚和没有滚动条的页脚。

此时我什至不会担心内容需要达到的最小高度（可能需要在内容 <div> 上使用滚动条，或者使子页脚和页脚都低于折叠）。

这是我想要实现的图像模型：

首先 - 一个

第二个 - 一个

最后 - 一个 >720px 的高窗口，没有滚动条，因为一切都是可见的：

我正在使用 jQuery，不关心 IE6。我可以在 CSS 中实现这一点吗？我必须使用 jQuery 来动态调整吗？使用 css3 可以轻松完成整页背景，我很乐意使用 css3 或 html5 来完成我需要的工作。

【问题讨论】：

为什么内容的最小高度对您不起作用？
因为子页脚不会总是在底部，并且页脚不会总是在屏幕 720px 的页脚不会总是固定在底部。
我真的没有看到问题.. 你有一个绝对定位的高 z-index 标题。然后是一个正常的内容区域，最后是一个页脚——如果你的 bg 图像都具有相同的大小——将位于页脚下方。还是您希望 bg-images 也可以缩放？一种选择是使用@media-queries...
也许我没有很好地解释我需要什么。棘手的部分是内容区域的高度尽可能高，并且子页脚与窗口底部挂钩，页脚位于折叠下方。然后在窗口高于 720 像素时更改为子页脚和页脚都固定在窗口底部。

标签： jquery html css

【解决方案1】：

你绝对不能使用 CSS position: fixed，因为它总是相对于视口，而不是父元素。

您需要做的是将“子页脚”作为“内容”的固定定位子元素。为此，您将不得不使用 Javascript。

这样的事情应该可以满足您的需求。尝试在 CSS 中更改 #content 的 height 变量，这样您就可以看到它在各种内容高度下的表现：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
    #header {
        height: 50px;
        background-color: #ccc;
        width: 100%;
        margin-bottom: 10px;
    }

    #content {
        position: relative;
        height: 1500px;
        width: 100%;
        background-color: #ccc;
    }

    #subfooter {
        height: 50px;
        width: 100%;
        background-color: #666;
        position: fixed;
    }

    #footer {
        height: 50px;
        width: 100%;
        margin-top: 10px;
        background-color: #ccc;
    }
</style>
<script>
    $(document).ready(function(){

        $(document).scroll(function() {
            position_subfooter();
        });

        var position_subfooter = function() {
            $("#subfooter").css("bottom", "20px");
            if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
                $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
            }
        }
        position_subfooter();
    });
</script>
</head>
<body>
    <div id="header">
        <h1>HEADER</h1>
    </div>
    <div id="content">

    </div>
    <div id="subfooter">
        <h2>SUB FOOTER</h1>
    </div>
    <div id="footer">
        <h1>FOOTER</h1>
    </div>
</body>
</html>

【讨论】：