Js-Html 前端系列--页面撑开头尾

ailiwei2014

于 2016-03-10 17:42:00 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/ChickenTang/p/5655396.html

本文介绍了一种实用的方法，通过调整CSS样式使网页内容始终占据整个页面高度，即使内容不多也能让底部固定位置。此方法适用于登录页等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习过程中，发现一个超实用的方法，就是当页面有尾部，但是内容又不多的情况下，让中间的内容把尾部撑到底部。

<script type="text/javascript">
        var statusTokenId="${statusTokenId!}";

        function register_box_w (a,b){
            var h = parseInt(document.documentElement.clientHeight||document.body.clientHeight);
            h = h-225-62;
            a.css({
                height:h+'px'
            });
            if(h>=600){
                b.css({
                    'padding-top':(h-650)/2+"px"
                })
            }

        }
        $(function(){
          register_box_w($(".login_content"),$(".loginmain"));//参数放登录的那个大框div
          $(window).resize(function(){
            register_box_w($(".login_content"),$(".loginmain"));//参数放登录的那个大框div
          });
        })
    </script>