css如何使用relative设置top为百分比值
css如何使用relative设置top为百分比值
发布时间：2022-04-28 18:10:56 来源：高防服务器网 阅读：79 作者：iii 栏目：大数据
本文小编为大家详细介绍“css如何使用relative设置top为百分比值”，内容详细，步骤清晰，细节处理妥当，希望这篇“css如何使用relative设置top为百分比值”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
效果如下图所示
效果实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直伸缩</title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ height: 100%; } .content{ min-width: 810px; min-height: 600px; height: 100%; border: 1px dashed green; } .wrap{ width: 100%; height: 191px; border: 1px solid blue; position: relative; top: 38.2%; } .wrap-content{ width: 100%; height: 191px; background-color: red; position: relative; top: -191px; } </style> </head> <body> <div class="content"> <div class="wrap"> <div class="wrap-content"> </div> </div> </div> </body> </html>
分析
利用的原理：
百分比值的计算方式：实际值 = 具有确定宽高的祖先元素的宽高 * 百分比值。默认情况下，块级元素的宽为100%，高度则是根据内容来计算。所以如果祖先元素没有确定了高度的，那么百分比值也无法确定，它的值会被设置为0。
如果设置了html元素的高度为height: 100%;那么html元素的高度会随着viewport的高度改变。
读到这里，这篇“css如何使用relative设置top为百分比值”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注高防服务器网行业资讯频道。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[