实现div始终固定在窗口底部的代码

转载 2013年12月03日 10:28:35

        网上实现这种功能的代码挺多的,但有个问题,网页如果放大的话,这个div会跟着放大,但不像网页的其他内容,它不能左右滑动,结果显示不全。而工作上的需求是jsp页面在手机上浏览的,这样就非常郁闷。后来换了一种方式,就是在网页一加载的时候,从窗体底部生成一个div,然后设置随着滚动条的滑动,div也自动滑动到窗体底部。同样能达到效果,而且放大后能显示完整。不过设计网页时最后得控制一下整体的最小宽度。

       以下是实现的js代码:

 <script>
function $(id)
{
  return document.getElementById(id);
}
var LoginUI = !!window.LoginUI || {};

LoginUI.getViewportWidth = function(){
    var width=0;
    if(document.documentElement && document.documentElement.clientWidth){
    width=document.documentElement.clientWidth;}
    else if(document.body && document.body.clientWidth){
    width=document.body.clientWidth;}
    else if(window.innerWidth){
    width=window.innerWidth-18;}
    return width;
}


LoginUI.getViewportHeight = function() {
    var height=0;
    if(window.innerHeight){
    height=window.innerHeight;}
    else if(document.documentElement&&document.documentElement.clientHeight){
    height=document.documentElement.clientHeight;}
    else if(document.body&&document.body.clientHeight){
    height=document.body.clientHeight;}
    return height;
}

LoginUI.getViewportScrollX = function(){
    var scrollX=0;
    if(document.documentElement&&document.documentElement.scrollLeft){
    scrollX=document.documentElement.scrollLeft;}
    else if(document.body&&document.body.scrollLeft){
    scrollX=document.body.scrollLeft;}
    else if(window.pageXOffset){
    scrollX=window.pageXOffset;}
    else if(window.scrollX){
    scrollX=window.scrollX;}
    return scrollX;
}

LoginUI.getViewportScrollY=function() {
    var scrollY=0;
    if(document.documentElement&&document.documentElement.scrollTop){
    scrollY=document.documentElement.scrollTop;}
    else if(document.body&&document.body.scrollTop){
    scrollY=document.body.scrollTop;}
    else if(window.pageYOffset){
    scrollY=window.pageYOffset;}
    else if(window.scrollY){
    scrollY=window.scrollY;}
    return scrollY;
}

function scrollMsgTip()
{

document.getElementById("msgtip").style.display="block";

   var t = LoginUI.getViewportHeight() + 
      LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
   $("msgtip").style.top = t + "px"; 
   
   /*
   $("msgtip").style.left = LoginUI.getViewportWidth() + 
      LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
    */  
   
}

function scrollTip()
{
    scrollMsgTip();
    
}

window.onload = scrollTip;
window.onscroll = scrollTip;
window.scrollTo(5, 5);//这段可以去掉,工作上的需求加上的

//以下可以去掉,工作上的需求加上的
function initScrollA(){//再执行一次移动document.getElementById("msgtip").style.display="block";var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight; $("msgtip").style.top = t + "px"; }
//以下可以去掉,工作上的需求加上的
function timeOut(){ setTimeout('initScrollA()',100); }</script>



Css如何定位网站的footer在固定位置(用DIV+CSS让footer始终在底部)

平时拿CSS布局都是一些内容比较多的网站,这两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容...
  • cs958903980
  • cs958903980
  • 2016年06月08日 14:44
  • 9647

JS实现让页脚一直固定在页面底部

当内容不够无法撑开页面时,需要将尾部一直固定在页面底部,JS实现页脚在浏览器可视范围内始终置底。 如下图所示: 无标题文档 * { margin: 0px; padding: 0px; ...
  • sweet_o
  • sweet_o
  • 2016年12月26日 16:18
  • 2407

CSS + DIV 让页脚始终底部

1、利用 bottom 属性? 在实践之前,很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面,可是这个是行不通的。如果使用了如下方法: footer { bottom:...
  • nathanhuang1220
  • nathanhuang1220
  • 2014年04月09日 11:42
  • 2810

css 页脚固定到底部

页脚基本有两种显示方式: 一、固定到窗口底部一直显示,不跟随滚动条滚动 要达到这种效果方法很简单,只需要设定页脚div的 position:fixed;bottom:0; 即可。 但是如果缩小浏览器窗...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年03月03日 13:31
  • 3314

完美解决HTML中footer保持在页面底部问题

完美解决HTML中footer保持在页面底部问题
  • m0_38099607
  • m0_38099607
  • 2017年05月10日 22:42
  • 8643

使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题

移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡...
  • u010394015
  • u010394015
  • 2017年05月27日 15:00
  • 3009

ionicCSS01_头部、底部和按钮

1.ionic 头部与底部 1.1 header头部 1)Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮 2)头部样式通过用class属性名引入, 3)bar和bar-header为...
  • weixin_36185028
  • weixin_36185028
  • 2017年01月08日 23:33
  • 1355

js 实现移动div窗体

js 实现移动div窗体
  • liangwenmail
  • liangwenmail
  • 2015年09月16日 22:18
  • 734

html固定浮动在底部div的实现效果

Document    body{  height:1500px;  }  .footer{  z-index:99999;  position:fixed;   bottom:0; left:0; ...
  • ligaogang
  • ligaogang
  • 2014年11月24日 10:38
  • 1999

如何将页脚固定在页面底部(多种方法实现)

[导读]当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 ...
  • u010319687
  • u010319687
  • 2014年03月24日 11:42
  • 1760
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现div始终固定在窗口底部的代码
举报原因:
原因补充:

(最多只允许输入30个字)