sticky footer

2018-02-10  本文已影响0人  谁说需要十年

所谓的sticky footer就是指:

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

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

当内容区域不够时:

当内容区域足够长时:


    HTML:

        <div>我是头部</div>

        <div class="content" >

            <ul class="oUl" ></ul>

        </div>

        <div>我是底部</div>

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 )

        }

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

上一篇下一篇

猜你喜欢

热点阅读