Question

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

我尝试任何事情：清楚：两者;底部：0;保证金......没有任何效果......

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

这是我的代码

<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

如果您希望页脚始终位于页面底部，除非按内容下推，请查看this sticky footer tutorial。您应该只需要以下代码。

<强> 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/

*/

Answer 2

您必须添加到您的CSS：

position: relative;

包含footer元素的元素。

对于position: absolute元素，

当然是footer。

在你的情况下：

#wrapper {
    position: relative;
}

Answer 3

这对我有用。尝试使其适应您的代码。如果它有用，请签名作为答案。

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

Answer 4

请参阅 LIVE DEMO

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

在HTML上，缺少关闭div
在CSS上，从班级"#contenu2"中删除了第2位（现在是"#contenu"）
将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;
}

Answer 5

把“位置：绝对;”在页脚css。 JsFiddle http://jsfiddle.net/sdxaZ/

页脚底部

5 个答案:

HTML：

CSS：