html 页面底部固定 footer

刺骨的言语ヽ痛彻心扉 2022-10-24 13:24 151阅读 0赞

我们在编写html页面的时候总是希望footer 永远固定在最底部，最下面的footer 如果我们采用绝对定位 当内容的告诉大于屏幕的高度的时候，我们发现底部这个时候就会一直保持在屏幕的底部，甚至将内容覆盖

当我们使用相对定位的时候，如果内容的高度是大于屏幕的高度还好，如果小于屏幕的高度，发现底部就不固定在底部了，而是在内容的下面，有时候到屏幕的中间了

所以无论采用相对定位还是绝对定位，都没有办法实现我们想要的结果，内容的最底部和屏幕的最底部，我们只有通过js来动态的控制，实现footer 始终在对底部，那么这个js 应该怎么写

// 解决底部固定的问题
    function autoFooter() {
    	
    	var flag=true;
    	$("#footer").css({"position":"absolute"})
    
    	if(flag){
          setTimeout(function(){
        	console.log("...............底部自动定位1000......");
        	// 获取内容的高度
        	var bodyHeight = $("body").height();
        	// 获取显示屏的高度
        	var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
        	
        	var footerHeight=$("#footer").height();
        	flag=false;
    
        	if (bodyHeight+footerHeight > iHeight) {
        		$("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});
        	}else{
        		$("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});
        	}
        	
    	  }, 1000);
    	}
    	
    	if(flag){
           setTimeout(function(){
        	   
           	   console.log("...............底部自动定位500......");
    
        	  // 获取内容的高度
        	  var bodyHeight = $("body").height();
        	  // 获取显示屏的高度
        	  var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
        	
        	  var footerHeight=$("#footer").height();
        	
        	  flag=false;
        	  if (bodyHeight+footerHeight > iHeight) {
        		$("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});
        	  }else{
        		$("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});
        	  }
    	    }, 500);
    	}
    }

这段代码就是就是根据内容的高度和屏幕的高度大小来动态的设置相对定位和自动定位

当内容的高度比屏幕的高度要大的时候，要使用相对定位

如果内容的高度小于屏幕的高度，要用相对定位

这个代码需要放在一个通用的js，在每个页面都要引入，定位在页面加载的时候调用

并且底部 的id = "footer" 这个根据自己的需要设置

注意：点击分页之后，内容高度发生编号，可以在点击分页之后重新执行autoFooter 方法

希望对你有所帮助！