简单实现页面“自适应”样式，小技巧！！！

最新推荐文章于 2024-02-19 20:13:16 发布

原创最新推荐文章于 2024-02-19 20:13:16 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #自适应

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现上中下结构自适应布局的方法，包括全局选择器设定、html与body高度设置，并通过具体样式代码展示了如何确保不同屏幕尺寸下布局的一致性。

1.设置全局选择器

*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

2.设置html与body

html,body{
	height: 100%;
}

3.实现上中下结构的自适应实例展示：

.header{
	background: red;
	height: 140px;
	margin-bottom: -140px;
	position: relative;
}

.mid_content{
	background: gold;
	min-height: 100%;
	padding: 140px 0px 150px 0px;
}

.footer{
	background: blanchedalmond;
	height: 150px;
	margin-top: -150px;
}

4.效果展示，不管界面大小怎么改变，上中下结构始终不变.