粘性页脚Sticky footers布局

需要处理一种布局当页面内容不足时, 页脚紧贴屏幕底部;当页面内容过长时,页脚紧贴内容后面。

container {

content{}  // 内容

footer{}   // 页脚

}

.content {min-height: 100%; padding-bottom: 60px; }  //padding-bottom是为底部页脚留摆放位置, 不然当内容足够长时,页脚会遮住内容

.footer{margin-top: 60px; }  // 这是为了让页脚一直浮在底部 ~~~~ 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,791评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,346评论 2 66
  • 还有5个月就和胡同学认识三年了,时间可过得真快啊 还记得第一次见到他时,蓝色的牛仔衬衫穿在校服里面,多青春洋溢的装...
    kuangkuangka阅读 274评论 0 0
  • 位于芜湖城东新区的大阳垾生态湿地公园,是芜湖又一张美丽的城市名片。沿着公园的石板路往里走,风景越来越美,一片片小水...
    投己有趣阅读 523评论 4 0