Sticky CSS Footer with absolute positioning of previous div

I am trying to position the footer at the bottom of the browser window. The content div has absolute positioning because of the various changing heights of its content. I have looked at the several different ways of doing this but for some reason the majority break the #content div and the footer positions itself between the header and content div. Does anyone have any ideas?

Here is my html

<div id="header"></div>
  <div id="content">                                                                        
      @RenderBody()                                  
  </div>                              
 <div id="footer"></div> 

Here is my CSS

#header {
height:115px;
position: relative;
color: #000;
padding-top: 10px;
border-bottom:1px solid #fff;
-moz-box-shadow: 0 0 10px 10px #ccc;
-webkit-box-shadow: 0 0 10px 10px #ccc;
box-shadow: 0 0 10px 10px #ccc;
}

#content {   
width:900px;
height:100%;
margin-top:40px;
margin-left:-450px;
left:50%;
position:absolute;    
}

#footer {
width:auto;
height:100px;
background:#d21f27;
margin-top:5px;
clear:both;
bottom:0;      
}

Answers


there is no need for position absolute for changing height.

See the answer http://jsfiddle.net/XpKJG/

Read when to use absolute and when not to


Like Fidrizers said, there should be no need for absolute positioning #content. But in some reasons, e.g. special interface design, it can be useful.

To create a sticky footer, the workaround from ryan fait is the most easy and stable way i know: http://ryanfait.com/sticky-footer/

You can apply this to your layout and set the #content absolute with top: 125px; right: 0; bottom: 100px; left: 0.

Important: The problem now is, that the content can disappear, depending on the viewports width and height. I really don't recommend to do this, but it may fix your problem.

Demo: http://jsfiddle.net/ubJAf/2/


Need Your Help

Too many fields in query output

ruby-on-rails ruby sqlite

I have a query and I only want to output three variables

Weird behaviour of cv::circle

c++ visual-studio opencv kinect

I'm trying to draw a couple of circles with OpenCV 3 onto an image which is obtained from the Kinect v2 sensor.