当前位置：首页 > 前端技术 > HTML >内容正文

HTML

高度随宽度适应的响应式方案

发布时间：2025/4/16 HTML 55 豆豆

生活随笔收集整理的这篇文章主要介绍了高度随宽度适应的响应式方案小编觉得挺不错的,现在分享给大家,帮大家做个参考.

概述

高度随宽度自适应有很多种方案，这里只讨论一种巧妙的方案，就是利用margin/padding。我把代码记录下来供以后开发时参考，相信对其他人也有用。

知识点

margin/padding有这么一个很巧妙的知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

自适应方案一

那么可以使用padding-bottom/top来实现自适应方案一，代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div {width: 50%;background-color: green;padding-top: 70%; } </style> </head> <body><div class="div"></div> </body> </html>

然而这个代码有一个缺点，就是无法设置max-height。原因是它的height是0，它是靠padding撑起来的，但是padding不属于height。所以我们有如下方案二。

自适应方案二

可以使用margin-bottom/top来实现自适应方案二，代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div {width: 50%;background-color: green;overflow: hidden; //形成BFC，不影响外面的元素max-height: 300px; } .div:after {content: '';display: block;margin-top: 50%; } </style> </head> <body><div class="div"></div> </body> </html>

可以看到，max-height起了作用。

填充内容

由于没有规定高度，那么向其中填充内容势必会占据一定的空间从而影响高度。所以这个时候一般利用绝对定位来向其中填充内容。

转载于:https://www.cnblogs.com/yangzhou33/p/9175651.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的高度随宽度适应的响应式方案的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。