Hi, I'm curious if anyone's found a really good, elegant solution for this... I haven't seen it documented anywhere:
How do you make a footer that locks to the bottom of the page a la position-absolute-bottom, but also expands to the bottom of the screen?
The Layout: link (<!-- m --><a class="postlink" href="http://testing.uwmike.com/layout.html">http://testing.uwmike.com/layout.html</a><!-- m -->)
The Problem: link (<!-- m --><a class="postlink" href="http://testing.uwmike.com/error/notyet">http://testing.uwmike.com/error/notyet</a><!-- m -->)
Obviously, error pages are just one example of where the content is not the vertical height of the window -- I don't want my layout relying on their being enough blog comments to fill it out.
Anyone know how to fix this? Is it pretty well just the ol' height:100%?
EDIT: Additional question: Is there a better way to do multiple background images (ie, top left wire thing and the loudspeaker bottom right) than just wrapping more non semantic divs around the content?You can used fixed positioning for the footer, but that only works in real browsers. Not IE. You should also be able to use absolute positioning and set the bottom property to 0. But again, I'm not sure it works in IE.
Do you kind of see a recurring theme here?
For right now, don't worry about this. Personally, I don't want a bunch of white space between the content and the footer. And it could also be that we're thinking too much design, and not enough user. Users don't give a rat's --- if the footer rests at the bottom of the screen. In fact, they might get annoyed if they have to move their mouse all the way down the screen to get at the footer links.
But like I said, there really isn't a sure-fire way to do it yet with CSS yet because of IE. You could try your hand at DHTML, as long as javascript-disabled browsers display the page correctly. Basically, start out with the style sheet you have, then add javascript to reposition the footer.Originally posted by toicontien
You can used fixed positioning for the footer, but that only works in real browsers. Not IE. You should also be able to use absolute positioning and set the bottom property to 0. But again, I'm not sure it works in IE.
Do you kind of see a recurring theme here?
Well, yeah, but there's no point crying about it. Even if Longhorn's IE7 is a perfect standards-compliant client, IE5 and IE6 will be with us for a long time.
For right now, don't worry about this. Personally, I don't want a bunch of white space between the content and the footer. And it could also be that we're thinking too much design, and not enough user. Users don't give a rat's --- if the footer rests at the bottom of the screen.
Right, but there's a background image I'd like in the bottom-right corner... but that brings up the other question-- it looks like you can only do background images one-per-blockelement, so that means that one has to go on body, and the other on an unsemantic wrapper div.
In fact, they might get annoyed if they have to move their mouse all the way down the screen to get at the footer links.
Well, it's more just validation and copyright...Originally posted by mikepurvis
Right, but there's a background image I'd like in the bottom-right corner... but that brings up the other question-- it looks like you can only do background images one-per-blockelement, so that means that one has to go on body, and the other on an unsemantic wrapper div.
Ah. I get what you're after. And there's nothing wrong with nesting DIVs. In fact, it's OK because they are unsemantic as long as the absence of their styles doesn't take any meaning away from the display.
Try this:
<style type="Text/css">
<!--
html { height: 100%; }
body (
background: color url(bgImage.xxx) no-repeat scroll bottom right;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
html>body { height: auto; }
#footer {
/* Styles for IE and standards browsers */
clear: both; /* In case you are floating elements */
width: 770px;
}
html>body #footer {
bottom: 0;
position: fixed;
}
#wrapper {
background: transparent url(someOtherImage.xxx) repeat-y scroll bottom left;
height: 100%;
min-height: 100%;
}
html>#wrapper { height: auto; }
-->
</style>
<body>
<div id="wrapper">
<!-- All your other content goes here -->
<div id="footer">
Footer content goes here
</div>
</div>
How many background images do you need?You can get the footer to stay on bottom using negative margins with css:
<html>
<head>
<title>
Two colored-link
</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0px;
}
#container {
border: 1px solid #ccc;
display: table;
height: 100%;
padding: 4px;
margin: 10px;
margin-bottom: -50px;
}
#footer {
background-color: #eee;
border: 1px solid #ccc;
height: 50px;
padding: 4px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
body content body content body content body content body content body content body content body content body content body content body content body content body content
</div>
<div id="footer">
blah blah footer content
</div>
</body>
</html>Originally posted by toicontien
How many background images do you need?
Just two, really, but if many were possible with little difficulty, it would be a way to easily do rounded corners... No, I don't like the w3c's recommended method -- the idea of a gigantic image in the background is repulsive to me from a design perspective, quite irregardless of the pageweight issue.
toicontien: I'd rather avoid a hack/browser-specific, if at all possible.
C1vineoflife: Thank you, I'll experiment with this further.
EDIT: Okay, it seems like it pushes the footer off the bottom of the page. Is this a factor of how browsers calculate height:100%? ie, seems to be taller than the actual viewable area. I guess I'm also just having trouble wrapping my mind around this scheme. Is there a page that explains how it works?My example kinda sucked. This should help you out:
<!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/Ah">http://alistapart.com/articles/footers/Ah</a><!-- m --> didnt realize about the negative margins trick.
I was having the same problem.
How do you make a footer that locks to the bottom of the page a la position-absolute-bottom, but also expands to the bottom of the screen?
The Layout: link (<!-- m --><a class="postlink" href="http://testing.uwmike.com/layout.html">http://testing.uwmike.com/layout.html</a><!-- m -->)
The Problem: link (<!-- m --><a class="postlink" href="http://testing.uwmike.com/error/notyet">http://testing.uwmike.com/error/notyet</a><!-- m -->)
Obviously, error pages are just one example of where the content is not the vertical height of the window -- I don't want my layout relying on their being enough blog comments to fill it out.
Anyone know how to fix this? Is it pretty well just the ol' height:100%?
EDIT: Additional question: Is there a better way to do multiple background images (ie, top left wire thing and the loudspeaker bottom right) than just wrapping more non semantic divs around the content?You can used fixed positioning for the footer, but that only works in real browsers. Not IE. You should also be able to use absolute positioning and set the bottom property to 0. But again, I'm not sure it works in IE.
Do you kind of see a recurring theme here?For right now, don't worry about this. Personally, I don't want a bunch of white space between the content and the footer. And it could also be that we're thinking too much design, and not enough user. Users don't give a rat's --- if the footer rests at the bottom of the screen. In fact, they might get annoyed if they have to move their mouse all the way down the screen to get at the footer links.
But like I said, there really isn't a sure-fire way to do it yet with CSS yet because of IE. You could try your hand at DHTML, as long as javascript-disabled browsers display the page correctly. Basically, start out with the style sheet you have, then add javascript to reposition the footer.Originally posted by toicontien
You can used fixed positioning for the footer, but that only works in real browsers. Not IE. You should also be able to use absolute positioning and set the bottom property to 0. But again, I'm not sure it works in IE.
Do you kind of see a recurring theme here?Well, yeah, but there's no point crying about it. Even if Longhorn's IE7 is a perfect standards-compliant client, IE5 and IE6 will be with us for a long time.
For right now, don't worry about this. Personally, I don't want a bunch of white space between the content and the footer. And it could also be that we're thinking too much design, and not enough user. Users don't give a rat's --- if the footer rests at the bottom of the screen.
Right, but there's a background image I'd like in the bottom-right corner... but that brings up the other question-- it looks like you can only do background images one-per-blockelement, so that means that one has to go on body, and the other on an unsemantic wrapper div.
In fact, they might get annoyed if they have to move their mouse all the way down the screen to get at the footer links.
Well, it's more just validation and copyright...Originally posted by mikepurvis
Right, but there's a background image I'd like in the bottom-right corner... but that brings up the other question-- it looks like you can only do background images one-per-blockelement, so that means that one has to go on body, and the other on an unsemantic wrapper div.
Ah. I get what you're after. And there's nothing wrong with nesting DIVs. In fact, it's OK because they are unsemantic as long as the absence of their styles doesn't take any meaning away from the display.
Try this:
<style type="Text/css">
<!--
html { height: 100%; }
body (
background: color url(bgImage.xxx) no-repeat scroll bottom right;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
html>body { height: auto; }
#footer {
/* Styles for IE and standards browsers */
clear: both; /* In case you are floating elements */
width: 770px;
}
html>body #footer {
bottom: 0;
position: fixed;
}
#wrapper {
background: transparent url(someOtherImage.xxx) repeat-y scroll bottom left;
height: 100%;
min-height: 100%;
}
html>#wrapper { height: auto; }
-->
</style>
<body>
<div id="wrapper">
<!-- All your other content goes here -->
<div id="footer">
Footer content goes here
</div>
</div>
How many background images do you need?You can get the footer to stay on bottom using negative margins with css:
<html>
<head>
<title>
Two colored-link
</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0px;
}
#container {
border: 1px solid #ccc;
display: table;
height: 100%;
padding: 4px;
margin: 10px;
margin-bottom: -50px;
}
#footer {
background-color: #eee;
border: 1px solid #ccc;
height: 50px;
padding: 4px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
body content body content body content body content body content body content body content body content body content body content body content body content body content
</div>
<div id="footer">
blah blah footer content
</div>
</body>
</html>Originally posted by toicontien
How many background images do you need?
Just two, really, but if many were possible with little difficulty, it would be a way to easily do rounded corners... No, I don't like the w3c's recommended method -- the idea of a gigantic image in the background is repulsive to me from a design perspective, quite irregardless of the pageweight issue.
toicontien: I'd rather avoid a hack/browser-specific, if at all possible.
C1vineoflife: Thank you, I'll experiment with this further.
EDIT: Okay, it seems like it pushes the footer off the bottom of the page. Is this a factor of how browsers calculate height:100%? ie, seems to be taller than the actual viewable area. I guess I'm also just having trouble wrapping my mind around this scheme. Is there a page that explains how it works?My example kinda sucked. This should help you out:
<!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/Ah">http://alistapart.com/articles/footers/Ah</a><!-- m --> didnt realize about the negative margins trick.
I was having the same problem.