紧贴底部的页脚

greatwhole 发布于2019-08-29 12:45 / 2148人阅读

摘要：这样就可以了我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。后记上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨参考资料总在底部的页脚揭秘

前言

在写前端页面时，经常会遇到这种情况：有一个具有块级样式的页脚，当页面内容足够长时它一切正常；有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来；页脚不能像我们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。

那么怎样做到内容多时页脚在内容下方，内容少时页脚“紧贴”在视口底部？我总结了四种方法。

正文

首先我先写一个简单的页面结构，如下：

再页面加点公共样式：

*{
    padding:0;
    margin: 0;
}
header{
    line-height: 80px;
}
header,footer{
    background-color: #ccc;
    text-align: center;
}
main{
    text-align: center;
    font-size: 30px;
}

接下来我们用四种不同的方法来实现如何让页脚紧贴底部。

方法一

/* footer的每一级父元素都为100%高 */
html,body {
    height: 100%;
    width: 100%;
}
/* 这里将页面内容最小高度设为100%；撑满屏幕，
然后使用margin-bottom负值把页脚吸上来，
最后设置底部内边距用来填充内容过多时被遮挡的页脚。 */
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}
footer{
    height: 80px;
}

方法二

方法二和方法一比较类似，只是用伪元素取代了内边距。代码如下：

html,body {
    height: 100%;
    width: 100%;
}
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
}
/* 这里用伪元素取代了方法一中.wrapper的内边距 */
.wrapper::after{
    content: "";
    display: block;
    height: 80px;
}
footer{
    height: 80px;
}

方法三

方法三借助视口相关的长度单位以及calc()函数。这两个东西都只能兼容到IE9。

.wrapper{
    min-height:calc(100vh - 80px);
}
footer{
    height: 80px;
}

前三种方法都有一定的局限性，都要给页脚设置固定的高度，不够灵活。有没有更加灵活的方法呢？
当然有，那就是我们方法四了。

方法四

方法四用到了CSS3中的布局神器Flexbox。

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

这样就可以了！我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。Flexbox是不是相当霸气？
Flexbox兼容性不是很好（万恶的IE），但在移动端还是不错的。可以放心使用。

后记

上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨！

参考资料：
CSS 总在底部的页脚
CSS揭秘

GPU云服务器云服务器页脚网页页脚固定页脚页头页脚

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112123.html

css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0
css揭秘笔记——结构与布局

摘要：回退方案根据兄弟元素的数量来设置样式知识点伪类选择器只有一个列表项等效于一个正好有四个列表项的列表中的第一个列表项它之后的所有兄弟元素因此，有且只有四个列表项的情况就可以表示为如果列表项不是四个，则没有被选中。自适应内部元素我们希望 width 可以像 height 一样，可以自动适应内容的宽度。假如有如下结构： Lorem ipsum dolor ... L...

张宪坤 2019-08-29 13:50 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

figofuture 2019-08-30 13:13 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

BearyChat 2019-08-22 10:49 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

renweihub 2019-08-01 16:04 评论0 收藏0