1

I need a footer in the bottom of a page, which is overlaps any content that will make the page scroll. Also, when scrolling down, it the footer still need to stay there.

Is this possible with css only working for IE6+ ?

olemarius
  • 1,124
  • 4
  • 17
  • 27
  • Possible duplicate of [CSS only technique for a fixed bottom footer with variable height, no tables, no overlap](http://stackoverflow.com/questions/29835813/css-only-technique-for-a-fixed-bottom-footer-with-variable-height-no-tables-no) – imme Nov 10 '15 at 03:59

4 Answers4

6

Recently I used the following style:

div.BottomDisclaimer
{
  z-index:100;
  position:fixed;
  bottom:0px;
  border-top-style: solid;
  border-top-width: 1pt;
  padding-top: 4px;
}
a programmer
  • 959
  • 4
  • 8
  • You can fold the border-top-* declarations into "border-top: 1pt solid". (Also, might you be better off using pixels?) – Paul Fisher May 19 '09 at 14:04
  • same goes here as for Moayad's sollution, IE6 doesn't support "position:fixed", so this will only work on IE7+ – peirix May 20 '09 at 06:30
1

Do a quick google search for CSS footer, and you'll find plenty solutions. But most solutions seem to work like this:

<body>
  <div id="wrapper">
     Main content
  </div>
  <div id="footer">
     Footer content
  </div>
</body>

and then applying css:

body, html { height: 100% }
#wrapper { height: 100% }
#footer {
  height: 150px;
  margin-top: -150px;
}
peirix
  • 36,512
  • 23
  • 96
  • 126
0

EDIT : because IE6 doesn't support position:fixed;, here's a good workaround.

Moayad Mardini
  • 7,271
  • 5
  • 41
  • 58
0

For IE6, it's not possible to use position:fixed. You can use Dean Edwards' IE7 library to get that behavior if you want.

Paul Fisher
  • 9,618
  • 5
  • 37
  • 53