css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部

wj1224_

于 2018-11-21 15:32:42 发布

阅读量5.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css布局文章标签： css布局底部

本文链接：https://blog.csdn.net/wj1224_/article/details/84324048

css布局专栏收录该内容

1 篇文章

订阅专栏

本文探讨了一种不依赖于position属性的网页布局方法，通过调整div元素的min-height和margin-top属性，实现了内容区域与固定底部栏的无缝衔接。这种布局方式适用于希望保持页面元素流动性和响应性的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍–要实现的效果

在这里插入图片描述

实现–布局（重要）

没有使用定位positon：absolute\fixed;感觉达不到我想要的效果。

<div class="bodybox">
	<div class="box-wrapper">
		//放主要的内容
		<div class="mainbox">
		......
		</div>
	</div>
	//始终在底部的盒子
	<div class="footerbox">
		PC访问https://jf.baiying.cn/进行积分好礼兑换
	</div>
</div>

.bodybox {
	width: 100%;
	height:100%;
}
.box-wrapper {
	min-height: 100%;
}
.mainbox {
	padding-bottom: 32px
]
.footerbox {
	margin-top: -32px;
}