移动端页面内容没有溢出却有滚动条？

关于盒子大小

我们都知道一个box的内容包含content、padding、border、margin。无论是标准盒子还是IE盒子，盒子的宽度都不包含margin，因此margin虽然看不到，但会影响到盒子实际所占空间的大小。
例如，我的一个界面中只有一个表单，我想要给它设置边框，且要显示出来边框，这个时候我们就会给它设置border和margin，但这个时候就出现了溢出的问题。
如下所示：

<template>
	<el-form class="form">
		<el-form-item label="用户名">
			<el-input></el-input>
		</el-form-item>
		<el-form-item label="密码">
			<el-input></el-input>
		</el-form-item>
	</el-form>
</template>
<style scoped>
	.form {
		border: 1px solid black;
		margin: 10px;
		width: 100%;
		height: 100%;
	}
</style>

解决办法

因为我们知道上面的溢出是margin会使盒子实际所占空间变大导致的，但是我们又想要有看得到的border。这个时候我们只需要给form一个父元素，问题就很好解决了。
如下所示：

<template>
	<div class="body">
		<el-form class="form">
			<el-form-item label="用户名">
				<el-input></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>
<style scoped>
	.body {
		width: 100%;
		height: 100%;
		padding: 10px;
	}
	.form {
		border: 1px solid black;
		width: 100%;
		height: 100%;
	}
</style>