保持页脚在页面最底部
你是否遇到过这样的问题：当页面的内容不足整页时，页脚会紧跟着上一个内容，在页面的中间而不是在页面的底部，非常不美观。
在我把网上的搜索的方法都试了个遍依旧无果之后，在朋友的提醒下尝试了这样的一个方法并成功实现：用JS获取body高度和浏览器窗口高度，并比较若body高度小于浏览器窗口高度，则将页脚用绝对位置的方式固定在最底部，否则则不作任何操作。
|
1 2 3 4 5 6 7 8 9 |
#footer { bottom:0px; visibility:hidden; height:20px; width:100%; padding:2.1em 0 2.1em; line-height:1.5 color:#999; } |
在页脚的样式中， bottom:0px; 使得页脚紧贴底部。 visibility:hidden; 使页脚默认为隐藏，不预设为隐藏的话，则会看到页脚先紧跟着上一个内容，加载JS后再移到页面底部，不美观。故先将页脚隐藏，固定好之后再出现。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
</div> </div> </div> <footer id="footer"> <div class="container"> © <?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <?php _e(' | Present by <a href="https://www.rabbidsx.com/about">Rabbids</a>'); ?> </div> </footer> <?php wp_footer();?> <script type="text/javascript"> if(document.body.clientHeight < window.innerHeight) { document.getElementById("footer").style['position'] = 'absolute'; } document.getElementById("footer").style['visibility'] = 'visible'; </script> </body> </html> |
在页脚的PHP文件中，将要执行的JS写在 </body> 之前。 document.body.clientHeight 是body高度， window.innerHeight 是浏览器窗口高度。若body高度小于浏览器窗口高度，则通过 document.getElementById("footer").style['position'] = 'absolute'; 将页脚以绝对位置的方式固定在最底部。通过 document.getElementById("footer").style['visibility'] = 'visible'; 将隐藏的页脚显示出来。
这样就能在即使页面的内容不足整页的情况下，页脚依旧处于页面最底部。