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

最新推荐文章于 2024-09-07 16:16:50 发布

Gabriel_wei

最新推荐文章于 2024-09-07 16:16:50 发布

阅读量1.1k

点赞数

分类专栏： vue 前端学习文章标签： css html html5

本文链接：https://blog.csdn.net/Gabriel_wei/article/details/120850855

版权

前端同时被 3 个专栏收录

183 篇文章 7 订阅

订阅专栏

学习

61 篇文章 0 订阅

订阅专栏

vue

31 篇文章 2 订阅

订阅专栏

问题描述

在这里插入图片描述
外层元素使用了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%;
}