解决弹性盒flex：1和固定定位position：fixed冲突的问题

最新推荐文章于 2024-07-24 11:13:53 发布

陌一一

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量775

点赞数 2

分类专栏： web前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/a1598452168YY/article/details/128419236

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

出现的问题：弹性盒和固定定位在一起使用时，发现弹性盒不起作用了。

解决办法：在标签外面再套一个盒子，在外部盒子footer上用定位，在ul身上用弹性盒，就解决啦

看代码：

<style lang="scss" scoped>
footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  ul {
    list-style: none;
    display: flex;
    li {
      flex: 1;
      text-align: center;
      height: 49px;
      line-height: 49px;
      background-color: skyblue;
      border: 1px solid greenyellow;
    }
  }
}
</style>

效果：