首页 > 代码库 > 页脚保持在未满屏页面的底部
页脚保持在未满屏页面的底部
最近有这样一个需求，就是说在页面内容不够丰富的情况下，我们得让页脚始终保持在页面的底部。
bala,bala。。。
在网上寻觅了一下，最终还是赏识用js解决的这款。
不闲扯，贴码show
html部分
<body><div id="top">top</div><div id="bottom">bottom</div></body>
css部分
*{ margin:0; padding:0;}#top{ background:#33CCFF; text-align:center;}#bottom{ background:#FFCC00; text-align:center; width:100%;}
javascript部分
function calcDistance(){ var topHeight = document.getElementById("top").scrollHeight; var bottomHeight = document.getElementById("bottom").scrollHeight; var allHeight = document.documentElement.clientHeight; var bottom = document.getElementById("bottom"); if((topHeight + bottomHeight) < allHeight){ bottom.style.position = "absolute"; bottom.style.bottom = "0"; }else{ bottom.style.position = ""; bottom.style.bottom = ""; } setTimeout(function(){calcDistance();},10);}
页脚保持在未满屏页面的底部
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。