页脚看不到 flexbox，所以它位于图像的顶部。如何响应式地将页脚放到网页底部？

Question

页脚“看不到”弹性框和图像。因此，它位于页面顶部。如何将页脚放到网页底部（图片下方）并做出响应？

footer {
  width: 100%;
  color: white;
  text-shadow: 2px 2px 1px black;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 20%;
  max-width: 20%;
  width: 300px;
  height: 300px;
  padding: 0 15px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

<div class="row">
  <div class="column">
    <img src="/gallery/jediandjulie.webp"><br>
    <div class="name">Jedi (right)</div><br>
    <img src="/gallery/abc_xylophone.webp">
    <div class="name">abc_xylophone</div><br>
    <img src="/gallery/blueice.webp">
    <div class="name">blueice</div><br>
  </div>
  <div class="column">
    <img src="/gallery/fern1.webp"><br>
    <div class="name">Fern</div><br>
    <img src="/gallery/cgeezy-612x1024.webp">
    <div class="name">cgeezy</div><br>
    <img src="/gallery/charlie_m.jpg">
    <div class="name">charlie_m</div><br>
    <img src="/gallery/cnc3.webp">
    <div class="name">cnc</div><br>
  </div>
  <div class="column">
    <img src="/gallery/foosh4.webp"><br>
    <div class="name">foosh</div><br>
    <img src="/gallery/epl2.webp">
    <div class="name">epl692</div><br>
    <img src="/gallery/Erika.jpeg">
    <div class="name">erika</div><br>
  </div>
  <div class="column">
    <img src="/gallery/zeused13-225x300.jpg"><br>
    <div class="name">zeused13</div><br>
    <img src="/gallery/funkmanshades.webp">
    <div class="name">funkman</div><br>
    <img src="/gallery/gabby.webp">
    <div class="name">Gabby</div><br>
  </div>
</div>

<footer class="center">
  <hr class="style-two">
  <p>Copyright &copy; TheVillage.care</p>
</footer>

已修复：

我制作了一个父元素以向下延伸到底部放置页脚的位置。

<div class"parent">...everything...</div>
<footer>...</footer>
.parent {margin-bottom:3000px}

Answer 1

您可以使用边距和填充来使页脚与底部保持距离例如：边距顶部：30px .... 要么更好的解决方案使用 postion:fixed.

Answer 2

你可以给 class 行 margin-bottom: 300px，并加上 footer { position: absolute;底部：0；左：0； } 定位页脚，使其始终位于页面底部。或者你甚至可以给 body（或父组件） padding-bottom: 300px 来做同样的事情。不要忘记给 body（或父组件）{ position: relative }

页脚看不到 flexbox，所以它位于图像的顶部。如何响应式地将页脚放到网页底部？

The footer does not see the flexbox, so it is at the top of the images. How do I get the footer down to the bottom of the webpage responsively?

html

css

footer

flexbox