Footer at the bottom

问题:

here's my problem, my footer dont stay at the bottom of the page.

I try anything: clear:boths;bottom:0; margin... nothing is working..

My question is: How can i put it in the bottom of the page.

HERE IS MY CODE

<div id = "wrapper">
       .....
       ....

   <div id = "content2">
    <div id = "fastMenu">
        <a href="conseil-d-administration">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes                    /default/interface/FR/menuAdmin.png'; ?>" border="0" />
        </a>
        <a href="congres-2012">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" />
        </a>
        <a href="formation">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" />
        </a>            
        <a href="devenir-membre">
            <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" />
        </a>            
    </div>  
    <div id="contenu" class="txt">          
        </div>   <?php //CONTENU2 ?>  
      <div id = "leftSide">
        <?php  include_once(INC_PATH_FULL_THEME.'event-teaser.php'); ?>
      </div>          
   </div>  <?php //CONTENT2 ?>   
     <div id = "footer">

       </div>           

CSS

#footer{
width: 900px;
height: 100px;
background:white;
margin-top: 100px;    
bottom: 0;
clear:both;    
 }
  #contenu2{
background:white;
width: 600px;
float:right;
padding-right: 2.5%;
 z-index: 1;
 }
 #content2{
width: 900px;
height: auto;
margin-left: 1px;
background:white;
overflow: auto;
z-index: 1;
position:absolute;
   }

#wrapper{
width:900px;    
align: 26.5%;
margin: 0 auto;
margin-top: 15px;
font-family: "Lucida Sans Unicode", Arial, Verdana;
 }

回答1:

Refer this LIVE DEMO

When am formatting your code on jsfiddle, I have come across few issues and fixed those:-

1. On HTML, closing div is missing
2. On CSS, removed number 2 from a class "#contenu2" (Now it is "#contenu")
3. Added position: absolute; to the #footer class

HTML:

<div id="wrapper">
    <div id="content2">
        <div id="fastMenu">
            <a href="conseil-d-administration">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes                    /default/interface/FR/menuAdmin.png'; ?>" border="0" />
            </a>
            <a href="congres-2012">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" />
            </a>
            <a href="formation">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" />
            </a>            
            <a href="devenir-membre">
                <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" />
            </a>            
        </div>  
        <div id="contenu" class="txt">          
        </div>   <?php //CONTENU2 ?>  
        <div id="leftSide">
        <?php  include_once(INC_PATH_FULL_THEME.'event-teaser.php'); ?>
        </div>          
    </div>  <?php //CONTENT2 ?>
    <div id="footer">
        FooterText
    </div>      
</div>
​

CSS:

#footer {
    width: 900px;
    height: 100px;
    background:white;
    margin-top: 100px;    
    bottom: 0;
    clear:both;    
    position: absolute;
}

#contenu {
    background:white;
    width: 600px;
    float:right;
    padding-right: 2.5%;
    z-index: 1;
}

#content2 {
    width: 900px;
    height: auto;
    margin-left: 1px;
    background:white;
    overflow: auto;
    z-index: 1;
    position:absolute;
}

#wrapper{
    width:900px;    
    align: 26.5%;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Lucida Sans Unicode", Arial, Verdana;
}​

回答2:

If you are wanting your footer to always be at the bottom of the page unless pushed down by content, check out this sticky footer tutorial. The following code should be all you need.

HTML:

<div class="wrapper">
    <div class="header">    
    </div>
    <div class="push"></div>
</div>
<div class="footer">
</div>

CSS:

* {
    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 */
}

/*

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

*/

回答3:

This worked for me. Try to adapt it to your code. Sign as an answer if it's helpful.

html, body {
    margin:0 auto; /* to center page align (can be left, right)*/
    height:100%;
}

#container {  /* contains everything, footer inclusive. */
    min-height:100%; 
    position:relative; 
}

#footer {
    clear: both;  
    position:absolute;
    bottom:0; 
    height:55px; /*Required, Height of the footer */
} 

回答4:

You must add to your css:

position: relative;

to element which contain footer element.

and of course position: absolute for footer element.

in your case:

#wrapper {
    position: relative;
}

回答5:

Put "Position:absolute;" in the footer css. JsFiddle http://jsfiddle.net/sdxaZ/