1

I have problem with the footer on my xhtml pages ... i want to put the footer always at the end of the page, at the bottom of it, so that when a page is poor in content the footer will stick to the bottom of the screen, but when a page is much longer it will stick at the end, after the last content of the page

How can i do it???

This is my CSS file

html {
   height:98%;
   margin: 0 auto 0 auto;
   width:1280px;
   padding:2px;
   padding-bottom:0px;
} 

body {
   overflow:auto;
   width:100%;
   margin: 0 auto 0 auto;
   height:100%;
}

#container {
   min-height:100%;
   height:100%;
   margin:0 auto -50px;
}

#box {
   min-height:100%;
}

#push {
   height:50px;
   clear:both;
}

#footer {
   height:50px;
   clear:both;
   position:relative;
   bottom:0px;
   width:100%;
}

And this the structure of my page

<html>
   <h:head></h:head>
   <h:body>
      <div id="conatiner">
         <div id="box">
            <header></header>
            <div id="externalborder">
            <div id="push"></div>
            <div id="footer"></div>
         </div>
      </div>
    </h:body>
</html>
Dimitri Dewaele
  • 10,311
  • 21
  • 80
  • 127
RevivedPicard
  • 129
  • 2
  • 12
  • 2
    possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) – Marc B Jan 24 '14 at 20:01
  • Do you have to support wich version of IE? you can use `calc()` – DaniP Jan 24 '14 at 20:09
  • it's not a duplicate because in the other post the request is kind different .... i have to use it mainly on chrome and firefox and how can i use calc() ?? – RevivedPicard Jan 26 '14 at 11:47

2 Answers2

2

U simply have to put bottom on 0px and set the position to fixed on the footer. Example:

#footer {
    position:fixed;
    bottom:0px;
}

#container {
    padding-bottom:3em;
}
Xatenev
  • 6,383
  • 3
  • 18
  • 42
  • *but when a page is much longer it will stick at the end, after the last content of the page* fixed don't work that way – DaniP Jan 24 '14 at 20:09
  • yeah with fixed it does not work the way i want ... with fixed it will stick at the end of the view page and if the page is longer the footer will ovverlap the contents ... – RevivedPicard Jan 26 '14 at 11:46
0

When the document height is greater than the viewport, you can then switch the footer to static positioning. That gives you the ability to position the footer at the bottom of the viewport when content is short, and at the end of the page as normal when the content is long.

You will need to use javascript to detect when the content height is greater than the viewport and add the style that changes the footer to static positioning.

Harvey A. Ramer
  • 763
  • 7
  • 13