Home > Article > Web Front-end > 一个在浏览器底部固定浮动的DIV如何实现（只用css）？_html/css_WEB-ITnose

一个在浏览器底部固定浮动的DIV如何实现（只用css）？_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:13:54919browse

就在已有的页面用js动态插入一段html代码，不改变其它原有标签的属性

我要固定浮动在底部

//只靠这段代码，改变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

我要固定浮动在底部

到底要底部哪个位置，自己改下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
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tes…… 这位大哥写的确实没错， 不过我的要求是就一个div标签， 比如新建一个html，内容就是 <div> 我不在下面？ </div> 保存，不能有body和html，head标签，style就不起作用？ 我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端， 拖动滚动条浏览始终在最低端 这个不能用吗？ <pre class="sycode" name="code"><div style="left:0; bottom:0; POSITION:absolute; width:100px; height:100px; z-index:100;">我要固定浮动在底部</div></pre> 引用 4 楼 coolzdp 的回复: 我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端， 拖动滚动条浏览始终在最低端 这个不能用吗？ HTML code <div>我要固定浮…… 不能啊，我的意思是只有div标签，没有body，style就不起作用了好像 <div></div> <div></div> html, body { margin: 0; padding: 0; height: 100%; width: 100%; _overflow: hidden; } #container { _width: 100%; _height: 100%; _overflow-y: scroll; } #bottom { background-color: #0ff; height: 30px; width: 100%; position: fixed; bottom: 0; z-index: 999; /* ie6 fixed */ _position: absolute; _bottom:-1px; _right: 17px; } 核心样式就两句：一句是position:fixed，另一句是bottom:0。 zell419 代码很正确,火狐,IE都兼容! 不错，很好很强大 我想问下，就在此情况下，能否让其也同时水平居中呢？？？ 能同时实现水平居中么？ [Quote=引用 6 楼的回复:] document.getElementById("shows").style.top=(document.documentElement.scrollTop || document.body.scrollTop)+ieheight-5-showsHeight+"px"; 这个可以~~ </div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：大家来看看我的这个代码为什么显示不出来框啊？_html/css_WEB-ITnoseNext article：overflow: scroll 的问题_html/css_WEB-ITnose

See more

一个在浏览器底部固定浮动的DIV如何实现（只用css）？_html/css_WEB-ITnose

回复讨论(解决方案)

Related articles