Forum Moderators: not2easy
I am trying to keep the footer always at the bottom.
I've searched everywhere and I have found the solution but it keeps the footer down only if the content is shorter than the container.
Which means: when i fill it with some text (content right) the footer just stays across the content.
I would like it to expand according to the content.
[edited by: swa66 at 10:28 am (utc) on Nov. 14, 2008]
[edit reason] No personal URLs please, see forum charter. [/edit]
The tricky bit will be IE6's lack of support for position:fixed, but some scripts like IE7.js can fix that shortcoming.
The "position:fixed" puts it on the bottom but as the content starts to spread over 100% height of the viewer's screen the footer stays at 100%.
[edited by: eelixduppy at 12:19 pm (utc) on Nov. 14, 2008]
[edit reason] removed URL [/edit]
what you describe is what happens with absolute positioning, not with fixed positioning.
Try this in any standards compliant (read: not IE) browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
#footer {
height: 1em;
width: 100%;
position: fixed;
bottom: 0;
background-color: red;
}
#content {
padding-bottom: 1em; /*height of footer*/
background-color: green;
}
.last {
background-color: blue;
}
</style>
</head>
<body>
<div id="content">
<h1>title</h1>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
Make the text long enough and/or the window small enough to force it to scroll: you'll always see the red stuck at the bottom and the blue visible as you scroll high enough.
Just think away the green background and you're done.
Wait trying it in IE ...
IE7 should be able to get it right, and it does indeed.
IE6 won't get it right as it doesn't support position fixed.
So you have the first option of letting it degrade gracefully (which it does on it's own, noothign more needed)
Or trying to fix it with scripting. I like to use IE7.js for that and that results in a solution like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
#footer {
height: 20px;
width: 100%;
position: fixed;
bottom: 0;
background-color: red;
}
#content {
padding-bottom: 20px; /*height of footer*/
background-color: green;
}
.last {
background-color: blue;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>title</h1>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
using absolute positioning this can be done too. The trick then is to set the overflow to scroll and have the scroll bar on just the body block instead of on the entire window. But even in that case IE6 will need scripted help as it doesn't do all of the needed absolute positioning either.
I was thinking more like when i replace "replace me with a really long text" with "a really long text";
for the footer to go down, and not stay on the page.
I want to scroll down, and then see the footer on the bottom.
Is it possible?
Thanks so much.
We can make things the height of the viewport by using height:100% on all elements for it to the root (the root element has 100% height) but the 100% height only has effect if the parent has an explicitly set height.
Now we don't want 100% height, we want a minimum height of something close to 100%. min-height should help us here.
Still we don;t want te content to be 100% height as it'll push the footer always just below the viewport, so we need to do a bit less. Without math that means we'll need to use some negative margins. But if we do that, the content of #content will overlap with the footer. So we need to somehow make sure there isn't content in the lower region of @content, without using padding (which expands it again).
The easiest solution seems to shamelessly adding a bit in #content to achieve this. Now changing your html to do layout is bad IMHO. But overlapping content isn't pretty either.
So let's get to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
html, body {
height: 100%;
}
#footer {
height: 1em;
background-color: red;
}
#content {
background-color: green;
min-height: 100%;
margin-bottom: -1em; /* height of footer */
}
.last {
background-color: blue;
}
#shame {
height: 1em; /* height of footer */
}
</style>
</head>
<body>
<div id="content">
<h1>title</h1>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
<div id="shame"></div>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
Now wow, there's a bit of orange sticking out of you scroll up. Seems my 1em isn't tall enough to prevent the paragraph in the footer from overflowing outside it and showing the html's background.
So we need to increase the height of it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
html, body {
height: 100%;
}
#footer {
height: 1.2em;
background-color: red;
}
#content {
background-color: green;
min-height: 100%;
margin-bottom: -1.2em; /* height of footer */
}
.last {
background-color: blue;
}
#shame {
height: 1.2em; /* height of footer */
}
</style>
</head>
<body>
<div id="content">
<h1>title</h1>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
<div id="shame"></div>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
On to testing in browsers: FF3: no problems, safari: works ok,
but it seems to trigger a strange bug in opera (9.62, mac). It doesn't work on reload but does work as you resize the window. I'll try to see how to file a bug report for that one with opera.
On to testing IE7: works
Well we know IE6 doesn't have support for min-height, so again we can either let it degrade gracefully, or we can try to fix it with either using an expression for the height, or with a shortcut of adding the support vie IE7.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
html, body {
height: 100%;
}
#footer {
height: 1.2em;
background-color: red;
}
#content {
background-color: green;
min-height: 100%;
margin-bottom: -1.2em; /* height of footer */
}
.last {
background-color: blue;
}
#shame {
height: 1.2em; /* height of footer */
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="content">
<h1>title</h1>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
<div id="shame"></div>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
Hope this is more what you were looking for.
I'll test it on the site and report if it works fine.
Thanks a lot!
This is my first attempt at a site without tables, but I am beginning to think it is just not possible. Had thought that swa66's post was my solution, but am running into some issues when I add columns. Problems show on both FF3 and IE7, so I guess it's my code instead of an IE bug.
I have two examples below to illustrate the idea and the problem.
Does anyone have any suggestions?
Many thanks in advance!
pbw
~~~~~~~~~~
Goals:
1. Footer needs to stick to the bottom of the page, even if the content does not fill the viewport.
2. Must have several columns.
3. Each column's background color must extend from the "base of the title" to the "top of the footer" - but not beyond the footer. So in the example, the light blue and the pink should run from the "base of the title" to the "top of the footer" (or thereabouts.)
4. If the color of the column needs to stop slightly short of the footer, that's okay, as long as both columns stop nearly evenly and reasonably close to the footer.
5. If the content extends beyond the viewport, the footer must be appended to the end of the content (rather than stopping at the bottom of the viewport.) In other words, the content must not flow to/through the footer.
~~~~~~ Enhanced original example ~~~~~`
Below is the code from swa66, plus two columns to show the idea. (See "NEW".)
After adding the columns inside #content, I used a "clear: both" on the .footer and on .shame to clear the floats. This, along with the min-height and margin-bottom which swa66 had originally, pushed the footer to the bottom. This was true whether the column had a lot of content or not.
However, the background colors of the columns do not fill nicely to the footer when they have only a small amount of content. Instead they stop at the end of the content, which is the problem I am trying to address.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
html, body {
height: 100%;
}
#footer {
clear: both; /* NEW */
height: 1.2em;
background-color: red;
}
#content {
background-color: green;
min-height: 100%;
margin-bottom: -1.2em; /* height of footer */
}
.last {
background-color: blue;
}
#shame {
clear: both; /* NEW */
height: 1.2em; /* height of footer */
}
/* NEW */
#leftcontent{
background: lightblue;
width: 40%;
float: left;
}
/* NEW */
#rightcontent{
background: pink;
width: 40%;
float: left;
}
</style>
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
</head>
<body>
<div id="content">
<h1>title</h1>
<!-- NEW Div #1 -->
<div id="leftcontent">
<h2>Left title</h2>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<!-- NEW Div #2 -->
<div id="rightcontent">
<h2>Right title</h2>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<div id="shame"></div>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
[code]
~~~~~~ Enhanced Code #2 ~~~~~~~~~
To make the columns extend from Title to Footer, I thought I needed to set the height of each column, but that seems to "unstick" the footer.
First I tried setting min-height and margin-bottom (as with #content), but that did not lengthen the columns.
Then I tried setting the height on
#rightcontent and #leftcontent. However, this isn't recognized unless I also set
#content{ height: 100% }. But setting height on #content makes the footer float upwards to the bottom of the **viewport** instead of the bottom of the content. (See below - latest changes marked NEW #2).
I also tried "overflow: auto" but that didn't help either.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: orange;
}
html, body {
height: 100%;
}
#footer {
clear: both; /* NEW */
height: 1.2em;
background-color: red;
}
#content {
background-color: green;
min-height: 100%;
margin-bottom: -1.2em; /* height of footer */
height: 100%; /* NEW #2 */
}
.last {
background-color: blue;
}
#shame {
clear: both; /* NEW */
height: 1.2em; /* height of footer */
}
/* NEW */
#leftcontent{
background: lightblue;
width: 40%;
float: left;
height: 100%; /* NEW #2 */
}
/* NEW */
#rightcontent{
background: pink;
width: 40%;
float: left;
height: 100%; /* NEW #2 */
}
</style>
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
</head>
<body>
<div id="content">
<h1>title</h1>
<!-- NEW Div #1 -->
<div id="leftcontent">
<h2>Left title</h2>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<!-- NEW Div #2 -->
<div id="rightcontent">
<h2>Right title</h2>
<p>replace me with a really long text.</p>
<p class="last">LAST LINE.</p>
</div>
<div id="shame"></div>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</body>
</html>
[code]
