最近有这样一个需求,就是说在页面内容不够丰富的情况下,我们得让页脚始终保持在页面的底部。
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); }