absolute positioning and css sticky footer

Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter.com method). inside my container div i have a content div that has four other divs inside of it. like so:

<div class="container">
    <div class="content">
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
    </div>
</div>
<div class="footer"></div>

In order for the sticky footer to work correctly all of the divs need to have position:relative; set, because the divs will have content that will be different lengths and they need to re-size accordingly. however where my dilemma begins is that i need to have divs 1-4 have position:absolute; set, so that they will stack on top of each other having the same (x,y) position.

is there any way to achieve what i need?

Joe Conlin

I typically just use the following to "stick" a div to the bottom of the page (or container):

.footer {position:absolute;bottom:0;left:0;}

Once you set position to absolute, it becomes independent of external divs and their position/dimensions.

Sam Hunter

I recommend Ryan Fait's sticky footer, works very well!

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -20px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 20px;
  /* .push must be the same height as .footer */
}

<body>
  <div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
  </div>
  <div class="footer">
    <p>Copyright (c) 2008</p>
  </div>
</body>

来源：https://stackoverflow.com/questions/6921080/absolute-positioning-and-css-sticky-footer

标签

css

layout

html

footer