美文网首页
sticky-footer布局的方法

sticky-footer布局的方法

作者: 明灭_ | 来源:发表于2018-11-12 11:36 被阅读0次

一、什么是sticky-footer布局?
sticky-footer布局是一种经典的布局效果,可概况如下:如果页面内容不够多(小于一屏),则页脚部分在屏幕最下方;如果页面内容大于一屏,则页脚部分跟随在内容之后。

内容小于一屏
内容大于一屏
二、布局方法
(1)方法一:min-height + padding-bottom + margin-top

页脚的margin-top要等于负的内容的padding-bottom


html
css
(2)方法二:flex布局

设置min-height和内容部分的flex-grow


html
css

相关文章

网友评论

      本文标题:sticky-footer布局的方法

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