What an I doing wrong? CSS Top Framew w Sticky Footer

I am trying to use a css top frame along with a sticky footer but what is happening is that when you scroll, the footer, overlaps the main content. Also, the main content should take the height of the content. What am I doing wrong? Help would be appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
html, body {overflow: hidden; height: 100%; max-height: 100%; }

#wrap {min-height: 100%;}

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;

/*Opera Fix*/
body:before {

position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;

position: fixed; 
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
padding-bottom: 150px;

margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 


<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")


<div id="framecontent">
<div class="innertube">

<h1>CSS Top Frame Layout</h1>
<h3>Sample text here</h3>


<div id="wrap">
<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>


<div id="footer">
<div class="footerContact">
	<li>Shelf Tattoos</li>


I think you have missed the definition of a “Sticky Footer”. What it does is sit at the bottom of the viewport on pages that have minimal content, then it gets pushed down when the content reaches it on longer pages. That is what the min-height:100% is for when using a sticky footer.

That will never happen with the code you posted because you have set the content to position:fixed with overflow:auto.

[COLOR=Blue]position: fixed; 
top: 130px;[/COLOR] /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
[COLOR=Blue]bottom: 0;[/COLOR]
[COLOR=Blue]overflow: auto; [/COLOR]
background: #fff;
[COLOR=Black]padding-bottom: 150px;[/COLOR]

I think you are trying to do something like this since I see the fake fixed rules for IE6 in your code.


If you are wanting a “Sticky Footer” then it requires a completely different approach and we can help you with that too. :slight_smile: