...

View Full Version : 100% height but with margin (sticky footer)



Hyra
09-26-2007, 11:26 AM
So i'm trying to get my head around this one.

Basically what i want it a fixed width container div which expands to the bottom (100% height) but with a, let's say, 10px margin at the top. In addition there has to be a sticky 100% width footer which always shows at the bottom.

The following html/css does exactly that without the margin at the top:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0 0 0 0;
_height: 100%; /* for ie sux */
}
#nonFooter
{
width: 800px;
margin: auto;
position: relative;
min-height: 100%;
background-color: #FF0000;
}

* html #nonFooter
{
height: 100%;
_height: 100%; /* for ie sux */
}
#footer
{
height:60px;
position: relative;
margin-top: -60px;
background-color:#FFFF00;
}
.clearer
{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
</style>
</head>
<body>

<div id="nonFooter">
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
</div>

<div id="footer"></div>

</body>
</html>


Now, when i add a "margin-top: 10px;" in the #nonFooter i do get the margin, but as a side-effect a scrollbar appears. I've been trying with negative margins in pretty much all elements now, but none seem to solve the issue.

As a bonus, the footer overlaps the text when the text gets to the bottom (noticable if you resize the window to a smaller size).

I realised the footer isn't causing the "scrollbar" problem, as when you leave it out it still doesn't do what it's supposed to. Maybe i'm just looking for a way to have a div have a 100% height but having a margin at the top

I've been googling and experimenting and only have a few hairs on my head left. So if anyone has a ephinany or sollution i would be ever so grateful with a cherry on top =)

abduraooft
09-26-2007, 11:50 AM
Are you trying for the below one?

#footer
{
height:60px;
width:100%;
position: absolute;
bottom:0;
background-color:#FFFF00;
}

<div id="nonFooter">
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
</div>
<div id="footer"></div>

Hyra
09-26-2007, 11:53 AM
Well ..


So i'm trying to get my head around this one.
I realised the footer isn't causing the "scrollbar" problem, as when you leave it out it still doesn't do what it's supposed to. Maybe i'm just looking for a way to have a div have a 100% height but having a margin at the top


So the footer isn't the problem, It's the margin on the container div that causes the scrollbar to appear.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum