本文介绍了页脚在底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的问题,我的页脚不留在页面底部。
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; }
这篇关于页脚在底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!