针对部分开发者认为React无法实现百分比布局的问题，本文介绍了通过在根元素设置百分比，并确保html和body元素的宽度和高度为100%，从而成功实现百分比布局的解决方案。这种方法避免了使用rem单位进行手动换算的困扰。
之前百度，各位大佬说 react各种不能进行百分比布局。都推荐使用rem布局，说是
react组件之间插入了一些div，导致百分比设置高度失效了，但是按照这种思路
我在根元素那里给他设置百分比不就行了吗
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app' style="height:100%;width:100%;"></div>
<script src="dist/main.js"></script>
</body>
</html>然后再给html,和body设置成100%
html,body{
width:100%;height:100%;margin:0
}用百分比布局
.loginBoxContent{
height:30%;
width:30%;
background-color: aqua;
border-radius: 1rem;
}
效果
这样就可以用百分比布局了，妈妈再也不用担心我不会换算rem 了
扫一扫
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
