页脚没有看到 flexbox，因此它位于图像的顶部。 如何将页脚响应式地放到网页底部？ [关闭]

Question

关闭。 这个问题需要细节或清晰。 它目前不接受答案。

---

想改进这个问题？ 通过编辑此帖子添加详细信息并澄清问题。

8 个月前关闭。

改进这个问题

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

 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

您可以使用边距和填充将页脚与底部保持距离 例如：margin-top:30px .... 或者更好的解决方案使用 postion:fixed。

Answer 2

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