uniapp设置width为100vh导致内部元素margin不正常

问题描述外层元素使用了width: 100vh，结果内部的margin显示不正常，此时的代码为<view class="content"><view class="main">14</view></view>.content {height: 100vh;width: 100vh;position: relative;background-color

Gabriel_wei

1057人浏览 · 2021-10-19 17:33:04

Gabriel_wei · 2021-10-19 17:33:04 发布

问题描述

在这里插入图片描述
外层元素使用了width: 100vh，结果内部的margin显示不正常，此时的代码为

	<view class="content">
		<view class="main">
			14
		</view>
	</view>

.content {
	height: 100vh;
	width: 100vh;
	position: relative;
	background-color: #F1F0F6;
}
.main{
	background-color: #fff;
	position: absolute;
	width: 80%;
	margin: 0 10%;
}

修改

在这里插入图片描述

	<view class="content">
		<view class="main">
			14
		</view>
	</view>

.content {
	height: 100vh;
	width: 100%;
	position: relative;
	background-color: #F1F0F6;
}
.main{
	background-color: #fff;
	position: absolute;
	width: 80%;
	margin: 0 10%;
}