资讯专栏INFORMATION COLUMN

Sticky Footer 粘性底部-让底部一直在页面最下面

ethernet / 1402人阅读

摘要:具体实例页面请看方法一绝对定位并加一层父元素不识别页面头部页面主体内容页面底部方法二绝对定位以为父元素页面头部页面主体内容页面底部方法三加负值上边距页面头部页面主体内容页面底部

具体实例页面请看github

方法一:footer绝对定位-并加一层父元素



    
    Title
    


header页面头部
页面主体内容
方法二:foote绝对定位-以body为父元素



    
    Title
    


    
header页面头部
页面主体内容
方法三:footer加负值上边距



    
    Title
    



header页面头部
页面主体内容
方法四:给section的高度用calc(100vh-footer.height)

calc():是css3新增方法,pc端大部分支持ie9+,移动端大部分不支持
vh单位:相对于视窗的高度,视窗的高度是100vh

方法四用calc()函数算出高度,内容较少,小屏幕下如果出现横向滚动条,会影响纵向滚动条




    
    Title
    



header页面头部
页面主体内容
方法五:用flexbox

flexbox对ie支持不太好




    
    Title
    


header页面头部
页面主体内容

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

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

相关文章

  • Sticky Footer 粘性底部-底部一直页面下面

    摘要:具体实例页面请看方法一绝对定位并加一层父元素不识别页面头部页面主体内容页面底部方法二绝对定位以为父元素页面头部页面主体内容页面底部方法三加负值上边距页面头部页面主体内容页面底部 具体实例页面请看github 方法一:footer绝对定位-并加一层父元素 Title *{ margin:0; ...

    pekonchan 评论0 收藏0
  • 前端必懂之Sticky Footer(粘性页脚)

    摘要:写在最前是的一种布局场景。页脚永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前:Sticky Footer是css的一种布局场景。页脚foot...

    piapia 评论0 收藏0
  • 前端必懂之Sticky Footer(粘性页脚)

    摘要:写在最前是的一种布局场景。页脚永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前:Sticky Footer是css的一种布局场景。页脚foot...

    jifei 评论0 收藏0
  • CSS粘性定位是怎样工作的

    摘要:怎样才能让粘性定位起作用粘性定位有两个主要部分,粘性元素和粘性容器。这是粘性元素可以浮动的最大区域。最好是在以粘性容器底部为自然位置的元素上使用它。 翻译:疯狂的技术宅原文:https://medium.com/@elad/css-... 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你推送新鲜的前端技术文章 浏览器对 CSS粘性定位有着非常好的支持,但很多...

    Wildcard 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<