欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-06 14:53:28
...
就在已有的页面用js动态插入一段html代码，不改变其它原有标签的属性
我要固定浮动在底部
//只靠这段代码，改变style

该如何实现？


回复讨论(解决方案)

testing


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就可以固定浮动在页面最低端，
拖动滚动条浏览始终在最低端 

testing

document.getElementById("shows").style.top=(document.documentElement.scrollTop || document.body.scrollTop)+ieheight-5-showsHeight+"px";


居屏幕底部。

HTML code




tes…… <br><br> 这位大哥写的确实没错， <br> 不过我的要求是就一个div标签， <br> 比如新建一个html，内容就是 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div style="position:fixed;_position:absolute;bottom:0px;_bottom:0px;_margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop);"> <br> 我不在下面？ <br> </div> <br><br> 保存，不能有body和html，head标签，style就不起作用？ <p class="sougouAnswer"> 我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端， <br> 拖动滚动条浏览始终在最低端 <br> 这个不能用吗？ <br><br></p> <pre class="sycode" name="code"><div style="left:0; bottom:0; POSITION:absolute; width:100px; height:100px; z-index:100;">我要固定浮动在底部</div></pre> <p class="sougouAnswer"> 引用 4 楼 coolzdp 的回复: <br><br> 我的意思是随便找个页面，粘贴上这段代码，这个div就可以固定浮动在页面最低端， <br> 拖动滚动条浏览始终在最低端 <br><br> 这个不能用吗？ <br><br> HTML code <br><br></p> <div style="left:0; bottom:0; POSITION:absolute; width:100px; height:100px; z-index:100;">我要固定浮…… <br><br> 不能啊，我的意思是只有div标签，没有body，style就不起作用了好像 <p class="sougouAnswer"> </p> <br> <br> <br><br> html, body { <br> margin: 0; <br> padding: 0; <br> height: 100%; <br> width: 100%; <br> _overflow: hidden; <br> } <br> #container { <br> _width: 100%; <br> _height: 100%; <br> _overflow-y: scroll; <br> } <br> #bottom { <br> background-color: #0ff; <br> height: 30px; <br> width: 100%; <br> position: fixed; <br> bottom: 0; <br> z-index: 999; <br> /* ie6 fixed */ <br> _position: absolute; <br> _bottom:-1px; <br> _right: 17px; <br> } <p class="sougouAnswer"> 核心样式就两句：一句是position:fixed，另一句是bottom:0。 </p> <p class="sougouAnswer"> zell419 代码很正确,火狐,IE都兼容! </p> <p class="sougouAnswer"> 不错，很好很强大 </p> <p class="sougouAnswer"> 我想问下，就在此情况下，能否让其也同时水平居中呢？？？ </p> <p class="sougouAnswer"> 能同时实现水平居中么？ </p> <p class="sougouAnswer"> [Quote=引用 6 楼 的回复:] <br><br><br><br> document.getElementById("shows").style.top=(document.documentElement.scrollTop || document.body.scrollTop)+ieheight-5-showsHeight+"px"; <br><br> 这个可以~~</p> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2suaHRtbD90PTI=" target="_blank" rel="nofollow"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9jb3Vyc2UvMDAwLzAwMC8wNzEvNjIwYzYwNGY3NTI1MTk5NS5wbmc=" style="margin-top: 30px;" alt="一个在浏览器底部固定浮动的DIV如何实现（只用css）？_html/css_WEB-ITnose" title="一个在浏览器底部固定浮动的DIV如何实现（只用css）？_html/css_WEB-ITnose"></a><p style="float:right;font-size:13px;color:#999;"><span class="red">声明：</span>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。</p> </div> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjIuaHRtbA==" target="_blank" rel="nofollow">html下拉菜单文字怎么变小</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjAuaHRtbA==" target="_blank" rel="nofollow">HTML里怎么设置thead表头的颜色</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODYyNzguaHRtbA==" target="_blank" rel="nofollow">html5中元素能拉伸宽度吗</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5ODcuaHRtbA==" target="_blank" rel="nofollow">html中怎么清除li黑点</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC0yNzk5MzYuaHRtbA==" target="_blank" rel="nofollow">一个在浏览器底部固定浮动的DIV如何实现（只用cs...</a> </li> </ul> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTIuaHRtbA==" target="_blank" title="框架初始类文件" rel="nofollow">框架初始类文件</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTEuaHRtbA==" target="_blank" title="前端应用" rel="nofollow">前端应用</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MTAuaHRtbA==" target="_blank" title="MVC目录结构规划" rel="nofollow">MVC目录结构规划</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5MDkuaHRtbA==" target="_blank" title="博客前后台功能介绍" rel="nofollow">博客前后台功能介绍</a> </li> </ul>
相关标签： 一个在浏览器底部固定浮动的DIV如何实现（只用css）？

上一篇： C#数据类型

下一篇： 图文详解bootstrap框架中table的使用方法和相关样式

推荐阅读