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

最新推荐文章于 2024-05-06 21:51:47 发布

转载最新推荐文章于 2024-05-06 21:51:47 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#前端 #javascript #ViewUI

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

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

<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>