html - 页脚在底部

Question

这是我的问题，我的页脚没有停留在页面底部。

我什么都试:clear:boths;bottom:0; margin ...没有任何工作..

我的问题是:如何将它放在页面底部。

这是我的代码

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

Answer 1

引用这个 LIVE DEMO

当我在 jsfiddle 上格式化你的代码时，我遇到了一些问题并修复了这些问题:-

1. 在 HTML 上，缺少结束 div
2. 在 CSS 上，从类 "#contenu2" 中删除数字 2(现在是 "#contenu")
3. 将 position: absolute; 添加到 #footer 类

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