Footer on html pages that stick dynamically at the bottom

StackOverflow https://stackoverflow.com/questions/21341434

  •  02-10-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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;
}

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top