html网页怎么通过css让footer始终固定在底部呢?

在制作网站过程中,正常网页高度够用时会自动把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固定在底部了,如果你也遇到了这样的问题,就试试看吧。

如果内容有帮助,就点个赞吧!

转载注明出处:http://www.12564.cn/show-268.html

如有疑问请联系 QQ:644233191   微信:zw1688k