由于 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 占据剩余空间 */
}
最后,处理成功