0

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

我尝试任何事情：clear:boths;bottom: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;
 }
4

5 回答 5

1

您必须添加到您的 CSS：

position: relative;

到包含元素的footer元素。

当然还有position: absolute元素footer。

在你的情况下：

#wrapper {
    position: relative;
}
于 2012-06-21T20:27:14.373 回答
1

参考这个LIVE DEMO

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

  1. 在 HTML 上，div缺少关闭
  2. 在 CSS 上，从一个类中删除了 2 号"#contenu2"（现在是"#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;
}​
于 2012-06-21T20:50:59.307 回答
1

如果您希望您的页脚始终位于页面底部，除非被内容向下推，请查看此粘性页脚教程。以下代码应该是您所需要的。

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/

*/
于 2012-06-21T20:26:27.640 回答
1

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

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 */
}
于 2012-06-21T20:35:06.523 回答
0

输入“位置：绝对；” 在页脚 css 中。JsFiddle http://jsfiddle.net/sdxaZ/

于 2012-06-21T20:26:51.263 回答