前端页面实现宽高自适应

最新推荐文章于 2025-04-21 11:33:57 发布

@码上行动

最新推荐文章于 2025-04-21 11:33:57 发布

阅读量7.2k

点赞数 1

分类专栏： CSS 文章标签： css html js javascript html5

版权

19 篇文章

订阅专栏

本文详细讲解了前端页面实现宽高自适应的方法，包括百分比宽度、高度自适应、min-height/max-height技巧，以及针对IE6的兼容策略。重点介绍了如何使元素随内容动态调整，并提供了一屏适配和IE6兼容的解决方案。

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

 width:100%; // 元素宽度设置为100%。（块元素宽度默认为100%）

元素 {height : auto; } 或高度不写 

height:100%; // 子元素的高度由父元素决定

min-height（最小高度）  注：height属性在IE6里就类似min-height作用。
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)

注：IE6及以下版本不识别该组属性。

既要有一定高度当我里面超出所给高度的时候盒子能自动撑开

如果想要盒子的大小等于当前屏幕的大小(元素的宽高度自适应窗口高度)

html,body{
	width:100%;
	height:100%;
}

块元素不设width 或者width:100%,内容的宽度跟随父元素的宽度变化而变化

高度自适应:
	父元素不设高度或者height:auto (父元素的高度由内容决定)
	min-height:最小高度(iE6以下浏览器不支持)
		1.当内容的高度过小时，父元素有一个固定的高度
		2.当内容的高度大于父元素的高度，让父元素内容的高度为准

如果当前需要考虑IE6浏览器
第一种

min-height：500px；
_height:500px;

第二种

height:500px;
height:auto !important;
min-height:500px;

总结

以上是对前端页面实现宽高自适应的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌