StickyFooter（粘性页脚）

时间：2023-04-05 22:36:32 HTML5

前端必须要看懂的写在最上面：StickyFooter是css的布局场景。页脚始终固定在页面底部。当页面内容不够长时，页脚贴在窗口底部，当内容足够长时，会下移。由于旧门户网站内容短小，版权页脚往往前移，移动端的具体排版也需要StickyFooter来解决这些问题。1.使用绝对定位和padding完美兼容已知底部高度，使用绝对定位和padding完美兼容https://codepen.io/qietuniu/pen/KYxMwv去除标签多余的margin和padding，设置100%externalforhtml和body容器的min-height为100%，这样当内容少的时候，主要内容可以展开。设置padding-bottom，也就是底部的高度，让内容能够完整显示；否则，主要内容的底部区域将被遮挡。DOM节点的绝对定位

样式代码html,body{height:100%;}.container{position:relative;最小高度：100%；高度：自动！重要；高度：100%；/*IE6不识别最小高度*/}.section{padding-bottom:60px;}.footer{position:absolute;宽度：100%；高度：60px；bottom:0px;}二、使用padding-bottom和margin-top完美兼容已知的底部高度，完美兼容padding-bottom和margin-tophttps://codepen.io/qietuniu/pen/dLqpdR去除多余的margin和标签的填充，为html和body设置100%；externalcontainermin-height为100%，这样内容少的时候可以打开主要内容。设置填充底部。这是底部页脚的高度。margin-top的高度是一个负值。DOM节点版权所有?1994-2019ChetuGirl样式代码html,body{height:100%;}.container{min-height:100%;高度：自动！重要；高度：100%；/*IE6不识别最小高度*/}.section{padding-bottom:60px;}.footer{position:relative;边距顶部：-60px；宽度：100%；height:60px;}3.添加块级元素填充已知页脚底部高度，添加块级元素填充页脚遮挡，实现完美兼容https://codepen.io/qietuniu/pen/dLqpez去掉标签多余的margin和padding，html和body设置100%；外部容器的min-height为100%，这样即使内容很小也可以拉伸主要内容NodeCopyright?1994-2019Chetuniu样式代码html,body{height:100%;}.container{最小高度：100%；高度ht：自动！重要；高度：100%；/*IE6不识别min-height*/margin-bottom:-60px;}.placeholder,.footer{height:60px;}4.使用table属性实现完美兼容底部不固定高度，使用table属性来实现完美兼容https://codepen.io/qietuniu/pen/QPVKVR去除标签多余的margin和padding，html和body设置100%，外部容器的min-height设置为100%；以便在内容比较少的时候可以拉伸出来，设置display属性为tablemaincontent，display属性设置为table-row，高度设置为100%DOMnodeCopyright?1994-2019ChetuNiu样式代码html,body{height:100%;}.container{display:table;宽度：100%；最小高度：100%；}.section{显示：表格行；height:100%;}五、calc计算vh兼容性有限，一般用于移动端100vh可以代替100%的body和html获取视口高度达到效果https://codepen.io/qietuniu/pen/NmLRmV外部容器通过calc计算，100vh减去底部高度。footer位置与容器同级，高度固定主要内容的display属性设置为table-row，高度设置为100%DOMnodeCopyright?1994-2019Chetuniu样式代码.container{min-height:calc(100vh-60px);}.footer{height:60px;}6、flex弹性布局底部高度可变，使用flex弹性布局实现效果，兼容性有限。移动端建议使用https://codepen.io/qietuniu/pen/EJeNYWVertical并设置最小高度为100vh主要内容flex属性设置为1DOMnodeCopyright?1994-2019Chetuniustylecode.container{显示：柔性;弹性流：列；min-height:100vh;}.section{flex:1}7.Grid网格布局底部高度不固定。使用Grid网格实现效果，兼容性有限。移动端推荐使用https://codepen.io/qietuniu/pen/EJeNYW。外部容器显示设置为网格网格布局，grid-template-rows设置一个网格的行数，frunits可以帮助我们创建一个弹出的网格轨道，代表网格容器中可用的空间（类似Flexbox中的无单位值）headerheader的位置部分放在主要内容的页脚中。grid-row-start和grid-row-end属性设置单元格开始和结束的行线DOM节点。Copyright?1994-2019Chetuniustylecode.container{最小高度：100vh；显示：网格；grid-template-rows:1frauto;}.footer{grid-row-start:2;grid-row-end:3;}结论以上方法各有优缺点，根据使用场景选择合适的方案程序兼容性要求高①②③底部高度不固定④⑥⑤⑦PC端推荐①②移动端推荐①②⑥完整代码尊重原创，如需转载请注明出处！

上一篇：前端实现文字跑马灯的三种方式

下一篇：H5添加API

StickyFooter（粘性页脚）相关文章