使用V-for渲染Vuejs中的项目列表后，CSS页脚没有粘在底部

Question

Footer忽略了我使用v-for渲染的项目，并显示在这些项目下，而不是最后。它在其他页面上运行良好，因为它卡在底部。

<template>
<div>
<!-- Item rendering -->
<div class="main-div2">
<div
class="div3"
v-for="(product, index) in $store.getters.getProducts"
:key="index"
>
<img class="img-style" :src="product.image" />
<p>{{ product.discription }}</p>
<h4>Price: {{ product.price }}</h4>
</div>
</div>
<TheFooter />
</div>
</template>

以下是组件的CSS类

.main-div2 {
display: flex;
flex-wrap: wrap;
height: 20vh;
justify-content: center;
z-index: 1;
/* grid-template-columns: repeat(auto-fit,minmax(50px,1fr));
grid-template-areas:
"div2 div3 div4 div5 div6"; */
}
.div3 {
flex: 1 1 250px;
position: relative;
height: 350px;
}

这是页脚主div类

.wrapper {
height: 350px;
background: rgb(219, 210, 210);
margin-top: 7rem;
width: 100%;
bottom:0;
position:absolute;
}

Answer 1

通过删除包含渲染列表的父div上指定的高度，找到了解决方案。

.main-div2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
z-index: 1;
}

还删除了绝对位置，使其遵循自然的保证金顺序。

.wrapper {
height: 350px;
background: rgb(219, 210, 210);
margin-top: 7rem;
width: 100%;
}