粘连布局

Posted 2020-12-18 liuqyu

一、什么是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>