Sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

想要飞的pig

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量149

点赞数

文章标签： css3 页面布局

本文链接：https://blog.csdn.net/tangjie109411/article/details/80561709

版权

这个东西还是有搞头的，属于一个css的布局技巧吧！
这个东西的定义简单的来说就是：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

首先是HTML·结构代码==>

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>

第一种方法：为内容区域添加最小的高度
　　这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content{
     min-height:calc(100vh-footer的高度);
     /*calc() 函数用于动态计算长度值。各个游览器的支持性还不错*/
     /*vh 相对于视窗的宽度：视窗宽度是100vh,1vh相当于是是视区高度的1/100*/
     box-sizing:border-box;
}

不适合在页面的footer高度不同的场景下使用。

第二种方法：使用flex布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
 }
 .footer{
    flex: 0;      
 }

这样的布局简单使用，比较推荐。

第三种方式：在content的外面可以添加一个wrapper

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}