美文网首页
sticky footer

sticky footer

作者: 谁说需要十年 | 来源:发表于2018-02-10 15:20 被阅读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 )

            }

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

    相关文章

      网友评论

          本文标题:sticky footer

          本文链接:https://www.haomeiwen.com/subject/ccoctftx.html