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元素固定底部有哪些方法，思路是什么”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!