Hi, I'm having a little trouble with a fixed header and footer. I can do the header bit fine position:fixed; and then on the center div top:100px; (or whatever height the header is) however the problem I'm having is with the footer div. The bottom:100px; on center is not pushing it up as I would have expected and therefore the text at the very bottom of the center is never shown. How would I overcome this without putting loads of line breaks at the bottom of the center div. Here is my markup so far.
<html>
<head>
<style type="text/css">
body {
border:0;
padding:0;
margin:0;
}
#head {
position:fixed;
z-index:1;
top:0; left:0; right:0;
height:110px;
background-color:black;
}
#center {
position:absolute;
z-index:0;
top:110px;
left:0; right:0;
bottom:100px;
background-color:white;
border:1px dashed red;
}
#foot {
position:fixed;
left:0; right:0;
bottom:0;
height:78px;
background-color:black;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="center">
top<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
the bottom<br />
</div>
<div id="foot">
</div>
</body>
</html>
ThanksGive the #center div tag a top and bottom margin of 100px then you won't have to bother with any positioning on it.
By using top:100px; you put it 100px from the top and it extends as far down as it needs to. By using bottom:100px; you position it 100px from the bottom and it goes up as far as it needs to. You can't do both at the same time, it doesn't make any sense. top takes priority over bottom as well.
<html>
<head>
<style type="text/css">
body {
border:0;
padding:0;
margin:0;
}
#head {
position:fixed;
z-index:1;
top:0; left:0; right:0;
height:110px;
background-color:black;
}
#center {
position:absolute;
z-index:0;
top:110px;
left:0; right:0;
bottom:100px;
background-color:white;
border:1px dashed red;
}
#foot {
position:fixed;
left:0; right:0;
bottom:0;
height:78px;
background-color:black;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="center">
top<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
here we are<br />
the bottom<br />
</div>
<div id="foot">
</div>
</body>
</html>
ThanksGive the #center div tag a top and bottom margin of 100px then you won't have to bother with any positioning on it.
By using top:100px; you put it 100px from the top and it extends as far down as it needs to. By using bottom:100px; you position it 100px from the bottom and it goes up as far as it needs to. You can't do both at the same time, it doesn't make any sense. top takes priority over bottom as well.