CSS让一个盒子div永远在视图界面的最底部

最新推荐文章于 2024-04-24 21:53:34 发布

K I N G

最新推荐文章于 2024-04-24 21:53:34 发布

阅读量4.1k

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/z2000ky/article/details/127510317

版权

让一个盒子div存在于body大盒子的最底部，直接用**绝对定位position: absolute;**就行

htlm部分

<body>
     <!-- 底部盒子 -->
    <footer>
        <a href=""><img src="./imgaes/index.png" alt=""></a>
        <a href=""><img src="./imgaes/sorts.png" alt=""></a>
        <a href=""><img src="./imgaes/cart.png" alt=""></a>
        <a href=""><img src="./imgaes/login.png" alt=""></a>
    </footer>
</body>

css样式部分

<style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 底部样式 */
        footer {
            display: flex;
            position: absolute;
            /* 和body这个盒子的底部距离为0px */
            bottom: 0px;
            width: 100%;
        }

        footer a{
            width: 25%;
        }
        footer img {
          width: 100%;
        }
    </style>