页脚在底部 [英] Footer at the bottom
本文介绍了页脚在底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的问题,我的页脚不留在页面底部。
here's my problem, my footer dont stay at the bottom of the page.
我尝试任何东西:clear:boths; bottom:0; ...
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.
这是我的代码
<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;
}
推荐答案
a href =http://jsfiddle.net/SivaCharan/tTCbp/ =nofollow> LIVE DEMO
Refer this LIVE DEMO
格式化您的代码 jsfiddle
,我遇到了几个问题,并修正了这些: -
When am formatting your code on jsfiddle
, I have come across few issues and fixed those:-
- 在HTML上,关闭
div
缺少 - 在CSS上,从类
contenu2
(现在#contenu
) - 添加
position :absolute; 到
#footer
类
- On HTML, closing
div
is missing - On CSS, removed number 2 from a class
"#contenu2"
(Now it is"#contenu"
) - Added
position: absolute;
to the#footer
class
HTML:
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:
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;
}
这篇关于页脚在底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文