css将底部元素放到盒子外边,css 固定在底部

　　前几天有人问我“如何固定容器底部的元素”。(本来想直接给他演示地址，找不到了，今天补上)

　　演示地址

想法思路

　　如果是页面底部，我们可以直接定位：固定；底部：0；基于浏览器定位的直接实现。

　　但是他想要的效果是基于父级容器，我们只好用其他手段定位了。

　　相对限制绝对，然后bottom: 0，但是当内容过长时，会导致显示异常。所以我们需要做内部滚动。如果我们进行内部滚动，那么我们可以直接打开盒子。不需要绝对定位

使用 flex 实现

　　父母使用flex布局，列垂直排列。父高度(height，maxHeight)。内容子flex:auto；自动打开。或者。内容高度受限。页脚可以使用绝对加填充。或者完全依赖文档流布局。

　　. demo1{ position:相对；填充-底部：40px显示：内嵌-伸缩；伸缩方向：列；} .demo1。页脚{位置：绝对；底部：0；左：0；右：0；边距：0；} .demo1。内容{溢出：自动；}

calc 实现

　　如果你不用flex，那么我们可以用calc减去页眉页脚空间。

　　style .demo3{ position:相对；} .demo3。内容{溢出：自动；max-height:calc(100%-40px)；}/style

absolute 实现

　　如果calc兼容性不是很好，那么也可以使用absolute从文档流中分离出所有元素。

　　style .demo4{ position:相对；} .demo4。标头， demo4。页脚{位置：绝对；边距：0；top:0；左：0；右：0；} .demo4。页脚{ top:auto；底部：0；} .demo4。内容{溢出：自动；身高：100%；padding-top:30px；填充-底部：30px边距：0；框大小：边框-框；}/style就是这样。本文介绍了css如何在容器底部固定元素。关于底部修复css元素的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。