Html 如何始终在底部进行按钮跳水？

当我缩小窗口时，我看到窗口大小的“底部”中的底部，但我希望无论窗口大小如何，底部div都将位于页面底部。我该怎么做呢

我的底线是：

HTML:

<div id="bottom">
  <a href="#">
<img class="imgCenter" src="image.png" width="50" height="50">
  </a>
</div>

<div id="bottom">
  <a href="#">
<img class="imgCenter" src="http://images.all-free-download.com/images/graphicthumb/black_sedan_car_clip_art_20377.jpg" width="50" height="50">
  </a>
</div>

如果有问题的话，我的包装风格是：

position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

---

谢谢

您需要使用#bottom而不是.bottom，因为您正在使用其id引用您的div。此外，您可以删除margin:0 auto或将其更改为margin:0，因为您的div具有100%的宽度，auto不会执行任何操作。

这里有一个完整的CSS解决方案，它不需要固定位置：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

---

您需要在内容周围使用

包装器
类，并在页面底部想要的div周围使用
foooter/push
。
绝对位置定义：元素相对于其第一个定位（非静态）的祖先元素定位

所以也许问题在于你的包装器祖先的位置，让它成为
位置：relative
，让我们知道发生了什么

无论如何，它是一个ID（#）而不是类（。
首先，css文件中有一个错误。您使用class元素，但在html中定义了id元素。这意味着你需要的是底部而不是底部。
第二，我的建议：

HTML:

<div id="bottom">
  <a href="#">
<img class="imgCenter" src="image.png" width="50" height="50">
  </a>
</div>

<div id="bottom">
  <a href="#">
<img class="imgCenter" src="http://images.all-free-download.com/images/graphicthumb/black_sedan_car_clip_art_20377.jpg" width="50" height="50">
  </a>
</div>

我不理解包装器div绝对居中的目的，但这是问题的根源

假设您希望保留包装器div，而不接触它，请将
#bottom
CSS位置更改为
position:relative
，这样您就可以在位于中心的包装器div内实现它。这是奇怪的行为，但这是你的行为

我的解决方案：从包装器div中删除所有CSS样式，然后观察
#bottom
div如何直接进入页面底部

还有其他问题吗？请在下面发表评论。
是的，对不起，这是a#而不是。在代码中，我错误地复制了它。我改为margin:0，但仍然是一样的…为什么包装器绝对定位？谢谢，我这样做是因为在内容空间的#header div和#bottom div之间有一个相等的空间（在我的例子中是#home）。你有新的方法吗？@Roy在你的问题中添加你家的相关代码，标题div，我可以根据它工作谢谢你的帮助。这是一个很长的文本代码。我在#header div中有主条和徽标，在#bottom中你可以看到。。。在#家里只有一些像文本这样的内容。所有我希望的是，首页内容将在页面的中间和中心（当然是响应的），因此，介于第i个标题和第二个家庭之间的空间，以及介于“家庭”到“底部”之间的空间是相等的。再次感谢您的帮助：）