Forum Moderators: not2easy
I want to be able to do this:
-Website 100% height
-If short content (dont have to scroll, footer is at the bottom of the viewable window) <-- 100% height
-If long content (if you have to scroll, the footer is below the content)
I used to be able to do this with tables, something like
<table style="height: 100%">
<tr>
<td style="height: 100%">
content
</td>
</tr>
<tr>
<td style="height: 20px">
footer
</td>
</tr>
</table>
That way the footer will be down the bottom no matter what.
I understand that for 100% height you must have
body, html {
height: 100%
}
in your css. I want it to work in IE / firefox / opera.
I think i found a way to make it work a few days ago, but it only worked in IE. Does anybody know how to do this with just css?
Using something like this does not work:
<html>
<head>
<style type="text/css">
<!--
body. html {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 100%
}#height {
height: 100%
}
#footer {
height: 20px;
position: absolute;
bottom: 0px;
top: auto
}
-->
</style>
</head>
<body>
<div id="height">hghg
<div id="footer">
footer
</div>
</div>
</body>
</html>
Because once the content goes past the original view of the window, the footer sticks to the bottom of the initial "100% view" of the browser.
I want it to be at the bottom if the content is small (like in that example) but still at the bottom once the content goes past the initial view and you have to scroll.
Any help would be great.
In my book, 100% equals the height of all my content. Can you describe a little more exactly what effect you're trying to produce? Are you trying to get your footer to "stick" to the bottom of the browser window?
height=100% for me mean: document.height (in javascript)
position: absolute;
bottom: 0;
left: 0;
Make sure the container <div> has a width of 100% (or the max width of your content area), and don't forget to give it a position: relative, as you cannot absolutely position anything in it without.
I think you would also need to ditch the body 100% thing, as I do not believe that accomplishes anything.
<edit>Thinking about it, I don't think this will accomplish your goal, as it does not force the container <div> to be the full height of the window if the content isn't there. You can try the position absolute; bottom: 0; left: 0; thing WITHOUT the container div (which will position them in relation to the browser window) but I'm not 100% sure what this will do when the content scrolls.</edit>
a bottom and a right property:
bottom=0px;
hehe :)
[pro2.ath.cx...]
?
Or at least, not to "stick" but to be AFTER the Div of the page text (wich is invisible on the page I gave you)
if you put it in body and html 100% means the height of the viewable area.
body. html
I hope that dot is a typo, since it needs to be a comma for it to work :)
