粘连布局

Posted liuqyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了粘连布局相关的知识,希望对你有一定的参考价值。

一、什么是stickyFooter?

1.经典的粘连“footer”布局;

2.有一块内容<main>;

3.当<main>的高度足够长的时候,<footer>应该紧跟在<main>元素后面;

4.当<main>元素比较短的时候,(小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部。

如图:

技术图片

布局:

技术图片

二、解决思路

main的内容没有撑到视口的大小应该在底部时
1.让wrap的高度撑到视口的高度,把html,body的高度一层一层继承下来,出现滚动条footer下移,利用marin的负值上来
2.如果main里面的内容变得越来越多,内容会溢出,因此warp的高度要随视口的高度
3.避免main的内容与footer重叠

<style>
            *{
                margin:0;
                padding:0;
            }
            html,body{
                height: 100%;
            }
            .wrap{
                min-height: 100%;/*warp的高度随视口的高度,防溢出*/
                
            }
            .wrap .main{
                padding-bottom: 50px;/*让main的内容不与footer重叠*/
            }
            .footer{
                height: 50px;
                line-height: 50px;
                text-align: center;
                background:deepskyblue;
                margin-top: -50px;/*让按钮上来*/
            }
        </style>

 

以上是关于粘连布局的主要内容,如果未能解决你的问题,请参考以下文章

对“粘连”footer布局的思考和总结

对“粘连”footer布局的思考和总结

底部粘连(stiky footer)布局

如何通过单击片段内的线性布局从片段类开始新活动?下面是我的代码,但这不起作用

Wordpress - 将代码片段包含到布局的选定部分的插件

有没有更聪明的方法将布局绑定到片段?