Menu
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:
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 with css3, I'm happy to use css3 or html5 to do what I need.
268
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
