摘要:具体实例页面请看方法一绝对定位并加一层父元素不识别页面头部页面主体内容页面底部方法二绝对定位以为父元素页面头部页面主体内容页面底部方法三加负值上边距页面头部页面主体内容页面底部
具体实例页面请看github
方法一:footer绝对定位-并加一层父元素方法二:foote绝对定位-以body为父元素Title header页面头部页面主体内容
方法三:footer加负值上边距Title header页面头部页面主体内容
方法四:给section的高度用calc(100vh-footer.height)Title header页面头部页面主体内容
calc():是css3新增方法,pc端大部分支持ie9+,移动端大部分不支持
vh单位:相对于视窗的高度,视窗的高度是100vh
方法四用calc()函数算出高度,内容较少,小屏幕下如果出现横向滚动条,会影响纵向滚动条
方法五:用flexboxTitle header页面头部页面主体内容
flexbox对ie支持不太好
Title header页面头部页面主体内容
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111902.html
摘要:具体实例页面请看方法一绝对定位并加一层父元素不识别页面头部页面主体内容页面底部方法二绝对定位以为父元素页面头部页面主体内容页面底部方法三加负值上边距页面头部页面主体内容页面底部 具体实例页面请看github 方法一:footer绝对定位-并加一层父元素 Title *{ margin:0; ...
摘要:写在最前是的一种布局场景。页脚永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前:Sticky Footer是css的一种布局场景。页脚foot...
摘要:写在最前是的一种布局场景。页脚永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前:Sticky Footer是css的一种布局场景。页脚foot...
摘要:怎样才能让粘性定位起作用粘性定位有两个主要部分,粘性元素和粘性容器。这是粘性元素可以浮动的最大区域。最好是在以粘性容器底部为自然位置的元素上使用它。 翻译:疯狂的技术宅原文:https://medium.com/@elad/css-... 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你推送新鲜的前端技术文章 浏览器对 CSS粘性定位有着非常好的支持,但很多...
阅读 3174·2021-09-29 09:34
阅读 3515·2021-09-10 10:51
阅读 1921·2021-09-10 10:50
阅读 6640·2021-08-12 13:31
阅读 2973·2019-08-30 15:54
阅读 1496·2019-08-30 15:44
阅读 1403·2019-08-29 12:26
阅读 2623·2019-08-26 18:36