Background image covering browser window minus header and footer below the fold
Title might be a bit confusing, I'll try my best to explain what I need to achieve. Basically I have the following elements to a particular webpage:
- Header - always visible above content
- Content - background image covers the entire content area - this is the key part
- Sub-footer - information about the content always visible below it
- Footer - standard company footer, visible if window height is a certain size, otherwise need to scroll down to see it
As I mention above, the content portion of the page is maybe the trickiest part. I need a big image to be in the background that covers the entire area. css-tricks has an excellent guide in the ways to do full page background images. So I'm hoping this can be achieved easily. The issue is how to make the sub-footer stay at the bottom if the window is <720px with the footer underneath it below the fold (needing you to scroll to it). A window >720px should show both the sub-footer and the footer with no scrollbars.
I won't even worry at this point about a minimum height the content needs to be (possibly necessitating scrollbars on the content <div> or making both the sub-footer and footer go below the fold).
Here are image mockups of what I'm trying to achieve:
First - a window <720px tall where the footer needs to be scrolled to:
Second - a window <720px tall that has been scrolled down to see the footer:
Finally - a tall window >720px that has no scrollbars because everything is visible:
I'm using jQuery and don't care about IE6. Can I achieve this in CSS? Do I have to use jQuery to dynamically adjust things? Full page backgrounds are easily done w开发者_开发问答ith css3, I'm happy to use css3 or html5 to do what I need.
You definitely can not use CSS position: fixed because that is always relative to the viewport, not the parent element.
What you need to do is have the "subfooter" as a fixed positioned child element of "content". In order to do that, you're going to have to use Javascript.
Something like this should do what you need. Try changing the height variable in the CSS for #content so you can see how it behaves with various content heights:
<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>
加载中,请稍侯......
精彩评论