I have a page like this:

<html>
  <body>

    <div id='tabContainer'>
      <div class='tab'>...</div>
      <div class='tab'>...</div>
    </div>

    <div id='footer'>...</div>

  </body>
</html>

Where the tabContainer is position: relative; and the tabs are all position: absolute;. They are position absolute so that they can all sit exactly on top of each other, so that javascript can let them fade into each other elegantly.

My problem is getting the footer to sit underneath the tabContainer. The tabContainer does not expand to encompass the absolutely-positioned tabs, so the footer sits behind the tabs.

I do not know the height of the tabs in advance.

Is there a method of doing this in pure CSS, or will I have to use javascript?

  • Will all the tabs have the same height, or will it be variable? Corey McKrill about 6 years ago

3 answers

0
points
This was chosen as the best answer

Is there a method of doing this in pure CSS, or will I have to use javascript?

The only way will be to position the footer the appropriate distance from the tab container, either by setting a height for the tab container, or padding on the body, or margin on the footer.

So you'll need to use javascript to find the height of the tallest tab and then apply that.

Answered about 6 years ago by Tony Crockford
  • Thanks...I've used javascript as you suggest Paul Roberts about 6 years ago
ashish 0
0
points

i can not get you properly, can you provide the screen shot for the same.

Answered about 6 years ago by ashish
0
points

Check out the solution below. It's pretty elegant. Go to Ryan site for an explanation.

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
Answered about 6 years ago by James Tu
  • Actually if I remember correctly this method requires an empty div. Try this method instead: http://www.cssstickyfooter.com/ Gideon Gauss about 6 years ago