Loading... 最近没什么特别的活动,没事了就写写目前在做的新网站,同时也有一些可以记录的东西水水 可以参观一下哈::[Hoihan.cn](https://hoihan.cn) 目前还不清楚到底要怎样做,先这样做着,等差不多确定下来了有做后端后台的计划,因为目前是Html的页面,等确定内容了,并且闲了再做后端 ##### 前言 放置Footer时会出现两种情况 1. 页面内容少,无法撑开,在可视窗口最底部 2. 页面内容多,在页面最底部 ##### 不同的实现方法 我一般个人偏向于css的position,感觉比较方便 当页面内容较少时,显示在页面可视窗口最底部(放置于head的style标签中) ``` footer{ width: 100%; height:50px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0; left:0; } ``` 这时使用到了absolute标签可以使footer的内容显示在可视窗口的最底部 防止啰嗦列出一下position的三种不同方法 * fixed 固定在可视窗口最底部 * absolute 显示在可视窗口的最底部 * relative 显示在页面的最底部 (和什么都不写一样,因为内容会直接将footer挤在底部) 再者没有什么更多的变化就不再放完整代码块了 同时还有使用推拉推来设置整个网页高度 ###### div.push写法 Html内容 ``` <div class="wrapper"> <div class="main" id="main"></div> <div class="push"></div> </div> <footer class="footer"> <p>© 2022 All Rights Received</p> </footer> ``` CSS ``` html, body { height: 100%; } .wrapper-add{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; 50px为footer的高度+margin } ``` 最后修改:2022 年 03 月 24 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏