使用 V-for 渲染 Vuejs 中的项目列表后 CSS 页脚不粘在底部答案

【问题标题】：CSS footer not sticking at bottom after using V-for to render list of items in Vuejs使用 V-for 渲染 Vuejs 中的项目列表后 CSS 页脚不粘在底部
【发布时间】：2021-04-15 18:17:51
【问题描述】：

页脚忽略了我使用 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;
}

【问题讨论】：

您的页脚位于absolute。这意味着它不会在页面上占据任何位置，它只是放置在位置为 relative 的父级的末尾。
@Serg 是的，你是对的。最重要的是，我使用 v-for 在包含渲染列表的主 div 上指定了高度。因此，它没有采用内容的原始高度，而是采用了指定的高度，这使得页脚跟随该高度。

标签： css vue.js bootstrap-4

【解决方案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%;

}

【讨论】：