Question

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

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

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

我现在甚至不担心内容需要的最小高度（可能需要内容<div>上的滚动条或者使子页脚和页脚都去在折叠之下）。

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

首先 - 一个窗口＆lt; 720px高，页脚需要滚动到： <720px tall window where the footer needs to be scrolled to

第二个 - 一个窗口＆lt; 720px高，已向下滚动以查看页脚： enter image description here

最后 - 一个高大的窗口＆gt; 720px没有滚动条，因为一切都是可见的： enter image description here

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

Answer 1

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

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

这样的事情应该做你需要的。尝试在#content的CSS中更改高度变量，这样您就可以看到它在各种内容高度下的行为：

<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>

覆盖浏览器窗口的背景图像减去页眉和页脚在折叠下方

1 个答案: