sticky footer

所谓的sticky footer就是指:

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到

而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位

当内容区域不够时:


sticky footer_第1张图片

当内容区域足够长时:


sticky footer_第2张图片



    HTML:

       

我是头部

        

           

            

            

    我是底部

    CSS:

            *{

                    margin: 0;

                    padding: 0;

            }

            html,body{

                height: 100%;

            }

            .content{

                min-height: 92%;

            }

            .header,.footer{

                height: 4%;

                width: 100%;

                background: darkgray;

                text-align: center;

        }


            for( var i=0 ; i<108;i++ ){

                    var Li = "我是内容"+i+"

                    "$(".oUl").append( Li )

            }

                主要是在内容区设置一个最低高度就可以了

    你可能感兴趣的:(sticky footer)