CSS页面底部修复的八种方法
时间：2023-04-05 19:53:16
HTML5
我们在写页面的时候，经常会遇到页面内容小的时候，footer会戳到页面中间什么的？无论如何，它不显示在底部。反正就是丑。下面要讨论的布局是为了解决如何让元素粘在浏览器底部。方法一：页脚高度固定+绝对定位htmlContent
CSS。dui-container{position:relative;min-height:100%;}main{padding-bottom:100px;}header,footer{line-height:100px;height:100px;}footer{width:100%;position:absolute;bottom:0}查看效果方法二：在主体内容的底部边距添加一个负值等于Bottomheighthtml
ContentCSShtml,body{height:100%;}main{min-height:100%;padding-top:100px;padding-bottom:100px;margin-top:-100px;margin-bottom:-100px;}header,footer{line-height:100px;height:100px;}查看效果方法三：将footer的margin-top设置为负值html
ContentCSSmain{min-height:100%;padding-top:100px;padding-bottom:100px;}header,footer{line-height:100px;height:100px;}header{margin-bottom:-100px;}footer{margin-top:-100px;}查看效果方法四：通过设置flex,设置页脚的margin-top为autohtml
ContentCSSbody{display:flex;min-height:100vh;flex-direction:column;}header,footer{line-height:100px;height:100px;}footer{margin-top:auto;}查看效果方法五：通过函数calc()计算内容的高度HTML代码
ContentCSS代码main{min-height:calc(100vh-200px);/*这个200px就是页眉和页脚的高度*/}header,footer{height:100px;line-height:100px;}查看效果方法六：通过设置flexbox，将主体设置为flexhtml
ContentCSS代码body{display:flex;min-height:100vh;flex-direction:column;}main{flex:1}查看效果方法七：使用网格布局Html代码
ContentCSS代码html{height:100%;}body{min-height:100%;display:grid;grid-template-rows:auto1frauto;}.footer{grid-row-start:3;grid-row-end:4;}查看效果方法八：display-*html
ContentCSSbody{最小高度：100%；显示：表格；宽度：100%；}main{显示：表格行；height:100%;}查看效果作者：w3cbest前端开发互动：如有疑问可进群讨论本文原创，版权归作者所有。商业转载请联系@w3cbest前端开发获得授权。非商业转载请注明原文链接和出处。
