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

最新推荐文章于 2025-05-10 16:56:44 发布

Gabriel_wei

最新推荐文章于 2025-05-10 16:56:44 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Gabriel_wei/article/details/120850855

前端同时被 3 个专栏收录

183 篇文章

订阅专栏

学习

61 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

本文探讨了当外层元素设置了100vh宽度，内部margin为何会显示不正常，并提供了针对`.content`和`.main`结构调整的解决方案。通过修改宽度和定位方式，确保了内部元素的正确布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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