基于CSS怎样将元素固定容器底部，有哪些方法-群英

上一篇：如何用CSS实现一个有设计感的角标？下一篇：CSS隐藏元素有几种方法，特点分别是什么

这篇文章给大家分享的是基于CSS怎样将元素固定容器底部，有哪些方法。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

想法&思路

如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。

但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了

relative 来限制 absolute，然后 bottom: 0，但是在内容过长的时候会导致显示异常。所以我们需要做内部滚动。
如果做内部滚动，那么我们只要可以撑开盒子即可。不需要绝对定位了

使用 flex 实现

父级使用 flex 布局，column 垂直排列。
父级定高（height、maxHeight），.content 子级 flex:auto; 自动撑开。或者 .content 做高度限制。

footer 可以使用 absolute 加 padding 。或者完全依赖文档流布局都可以

.demo1{
      position: relative;
      padding-bottom: 40px;
      display: inline-flex;
      flex-direction: column;
  }
  .demo1 .footer{
      position: absolute;
      bottom: 0;
      left: 0;right: 0;
      margin: 0;
  }
  .demo1 .content{
      overflow: auto;
  }

calc 实现

如果不使用 flex ，那么我们可以用 calc 来减去 header 和 footer 空间。

<style>
    .demo3{
        position: relative;
    }
    .demo3 .content{
        overflow: auto;
        max-height: calc(100% - 40px);
    }
</style>

absolute 实现

如果 calc 兼容性不太好，那么还可以使用 absolute 将所有元素都脱离文档流。

<style>
    .demo4{
        position: relative;
    }
    .demo4 .header,.demo4 .footer{
        position: absolute;
        margin: 0;
        top:0;left:0 ;right:0;
    }
    .demo4 .footer{
        top: auto;
        bottom: 0;
    }
    .demo4 .content{
        overflow: auto;
        height: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
        margin: 0;
        box-sizing: border-box;
    }
</style>

以上就是关于“基于CSS怎样将元素固定容器底部，有哪些方法”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。