覆盖浏览器窗口的背景图像减去页眉和页脚在折叠下方
at.*_*at. 6 html css jquery html5 css3
标题可能有点令人困惑,我会尽力解释我需要实现的目标.基本上我对特定网页有以下要素:
- 标题 - 始终在内容之上可见
- 内容 - 背景图片涵盖整个内容区域 - 这是关键部分
- 子页脚 - 有关内容的信息始终显示在其下方
- 页脚 - 标准公司页脚,如果窗口高度是一定大小,则可见,否则需要向下滚动才能看到它
如上所述,页面的内容部分可能是最棘手的部分.我需要一个覆盖整个区域的背景中的大图像.css-tricks 在完成整页背景图像方面有很好的指导.所以我希望这很容易实现.问题是如果窗口<720px并且页脚位于折叠下方(需要您滚动到它),如何使子页脚保持在底部.一个> 720px的窗口应该显示子页脚和没有滚动条的页脚.
在这一点上,我甚至不担心内容需要的最小高度(可能需要内容上的滚动条<div>或使子页脚和页脚都低于折叠).
这是我想要实现的图像模型:
首先 - 一个<720px高的窗口,其中页脚需要滚动到:
第二个 - 一个<720px高的窗口,已向下滚动以查看页脚:
最后 - 一个高大的窗口> 720px没有滚动条,因为一切都是可见的:
我正在使用jQuery而不关心IE6.我可以在CSS中实现这一点吗？我是否必须使用jQuery动态调整内容？使用css3可以轻松完成整页背景,我很高兴使用css3或html5来完成我需要的工作.
你绝对不能使用CSS，position: fixed因为它总是相对于视口，而不是父元素。
您需要做的是将“subfooter”作为“content”的固定位置子元素。为此，您必须使用 Javascript。
像这样的东西应该可以满足你的需要。尝试更改 CSS 中的高度变量，#content以便您可以看到它在不同内容高度下的行为方式：
<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>