Heim > Artikel > Web-Frontend > CSS如何控制div固定于网页底部_html/css_WEB-ITnose
CSS如何控制div固定于网页底部_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:591364Durchsuche
CSS如何控制div固定于网页底部:
网页设计中可能需要这样的效果，那就是将一个条幅放在网页的最底部，并且在网页滚动的时候能够穿过此条幅。
代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">html, body { padding:0px; margin:0px; height:100%}#main { height:100%; width:100%; overflow:auto;}.neirong { height:1000px; width:20px; background-color:green; margin:0px auto;}#bottombar { position:absolute; width:100%; height:30px; line-height:30px; text-align:center; bottom:0px; background-color:#999; z-index:2;}</style></head><body><div id="main"> <div class="neirong">其实我很长，往下使劲拉吧</div></div><div id="bottombar">蚂蚁部落欢迎您！</div></body></html> 以上代码满足了我们的需求。下面简单介绍一下实现步骤:
一.将底部div与主体div进行绝对定位，于是它们将脱离文档流，两个div之间就可以相互覆盖了。
二.使用bottom属性将底部div定位于网页的地步，然后设置它的z-index属性值为2,主体div的z-index的属性值为1，以保证底部div能够居于主体div之上。
三.将主体div的overflow的属性值设置为auto，以保证主体div当高度超出显示区域时可以使用下拉条查看隐藏内容。
注意: 虽然overflow:visible也能够使用下拉条查看超出的内容，但是作用却是不一样的。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0508/942.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4688
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：几个CSS的黑科技_html/css_WEB-ITnoseNächster Artikel：手机自适应meta设置_html/css_WEB-ITnose