Home > Article > Web Front-end > How to implement a fixed floating DIV at the bottom of the browser (using only css)? _html/css_WEB-ITnose
How to implement a fixed floating DIV at the bottom of the browser (using only css)? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:13:54963browse
就在已有的页面用js动态插入一段html代码，不改变其它原有标签的属性
457f4eaec7c2addb31d72ae4a4acd6e3我要固定浮动在底部16b28748ea4df4d9c2150843fecfba68 //只靠这段代码，改变style
该如何实现？
回复讨论(解决方案)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>testing</title><style type="text/css">.shape{width:200px; height: 140px; position:fixed!important; position:absolute; right:5px; bottom:5px!important; bottom:auto; top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight - this.clientHeight):document.body.scrollTop+(document.body.clientHeight - this.clientHeight));}.shape .con{width:200px; height:100px; background: url(http://static.l99.com/skin/default/images/versus/pk_vote_record.gif) no-repeat;}.shape .btn{width:200px; height:40px; background: url(http://static.l99.com/skin/default/images/versus/pk_vote_record.gif) no-repeat 0 -100px;}.height{height:1300px;}</style></head><body><div class="shape"><div class="con"></div><div class="btn"></div></div><div class="height"></div></body></html> http://hi.baidu.com/iamzhangxinxu/blog/item/f4b1f550d65cdd10367abe9d.html
b3f80f28f2e0c9422f290d61cf34d4cc我要固定浮动在底部16b28748ea4df4d9c2150843fecfba68
到底要底部哪个位置，自己改下left:***
#foot{position:fixed;_position:absolute;bottom:0px;_bottom:0px;_margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop)}
试下。
我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端，
拖动滚动条浏览始终在最低端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>testing</title><style type="text/css">#foot{position:fixed;_position:absolute;bottom:0px;_bottom:0px;_margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop)}</style></head><body style="height:5000px;"><div id="foot">我不在下面？</div></body></html>
document.getElementById("shows").style.top=(document.documentElement.scrollTop || document.body.scrollTop)+ieheight-5-showsHeight+"px"; 居屏幕底部。
HTML code
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7tes……
这位大哥写的确实没错，
不过我的要求是就一个div标签，
比如新建一个html，内容就是
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a
ac3db2fbaf190447a6dbba8f8d3a1a38
我不在下面？
16b28748ea4df4d9c2150843fecfba68
保存，不能有body和html，head标签，style就不起作用？
我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端，
拖动滚动条浏览始终在最低端
这个不能用吗？
<div style="left:0; bottom:0; POSITION:absolute; width:100px; height:100px; z-index:100;">我要固定浮动在底部</div>
引用 4 楼 coolzdp 的回复:
我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端，
拖动滚动条浏览始终在最低端
这个不能用吗？
HTML code
b3f80f28f2e0c9422f290d61cf34d4cc我要固定浮……
不能啊，我的意思是只有div标签，没有body，style就不起作用了好像
6c04bd5ca3fcae76e30b72ad730ca86d
e0e6b80c2b871989cf94b51f0a97caf216b28748ea4df4d9c2150843fecfba68
b22bdeeb5595071ed4244be8ab7d297416b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
_overflow : hidden;
}
#container {
_width: 100%;
_height: 100%;
_overflow-y: scroll; > background-color: #0ff;
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 999;
/ * ie6 fixed */
_position: absolute;
_bottom:-1px;
_right: 17px;
}
The core style is just two sentences: one is position:fixed, the other One sentence is bottom:0.
Not bad, very good and powerful
I would like to ask, in this case, can it be used? Also horizontally centered? ? ?
Can horizontal centering be achieved at the same time?
[Quote=Quote 6th floor’s reply:]
document.getElementById("shows").style.top=(document.documentElement.scrollTop || document .body.scrollTop) ieheight-5-showsHeight "px";
This works~~