前端margin-top设置失效

由于 container 的被设置为 width: 100vw;
  height: 100vh; ，导致布局受到限制，无法正常向上移动。因此设置了margin-topx .元素距离没有正常改动

.container {
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

.body-container {
  padding: 0 20px;
  width: 100%;
  margin-top: 50rpx; /* 添加与 .card 元素的间距 */
  background-color: #f5f5f5;
  box-sizing: border-box;
}

可以通过修改高度或者避免使用高度计算来解决此问题。

方法1.在body-container添加calc()函数

.body-container {
  padding: 0 20px;
  width: 100%;
  height: calc(100vh - 100rpx);/*添加这个*/
  margin-top: 50rpx; /* 添加与 .card 元素的间距 */
  background-color: #f5f5f5;
  box-sizing: border-box;
}

方法2.可以通过移除高度的计算，直接通过 flexbox 布局来控制 .body-container 的位置。修改后的代码如下：

.container {
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.body-container {
  margin-top: 50rpx; /* 设置与卡片的间距 */
  padding: 0 20px;
  width: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box;
  flex-grow: 1; /* 确保 body-container 占据剩余空间 */
}

最后，处理成功