在制作网站过程中,正常网页高度够用时会自动把footer挤到底部,但不是所有页面都是有内容的,这时候就会出现footer跑到网页中间,而且底部露出一大段空白的现象。这时我们应该如果通过css让footer始终固定在底部呢?今天介绍下通过css的flex属性来实现,具体请看下面的代码:
假设网页代码如下: <html> <head></head> <body> <div class="content"></div> <footer></footer> </body> </html> 可使用如下css代码来显示footer固定底部 <style> body{ display: flex; min-height: 100vh; flex-direction: column; } .content{ flex: 1; } </style>
参考上面的HTML和css代码就可以实现footer固定在底部了,如果你也遇到了这样的问题,就试试看吧。
如果内容有帮助,就点个赞吧!