sticky-footer布局的方法

一、什么是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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,062评论 1赞 92
  • Css 布局 -
    1. 前言 前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在...
    YjWorld阅读 4,873评论 5赞 15
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 28,719评论 1赞 45
  • 【0302今日剽悍】上货完成
    【0301今日剽悍】沧海一笑 目标： 1.2个俯卧撑 2.读2页书 3.写50字 成果：30个仰卧起坐，完成，正在...
    沧海一笑_8f63阅读 218评论 0赞 0
  • 转世 第49章 樊祖
    “这事情可怠慢不得，你得尽快去拜见老祖。”樊天宠连道，随即感慨，“我修行这么多年，也就见过老祖一次，你到是好运，以...
    im喵小姐阅读 418评论 0赞 0

友情链接更多精彩内容