我怎样才能让我的盒子不接触页面底部？答案

【问题标题】：How can I make my box not touching the bottom of the page?我怎样才能让我的盒子不接触页面底部？
【发布时间】：2020-12-08 16:35:49
【问题描述】：

我想知道一种方法，使我的框不会触及页面底部。我正在使用 Bootstrap 4，尝试了间距实用程序，但它似乎不起作用。

这是现在的图片，它实际上位于页面底部。

.signup {
  position:absolute;
  border:1px solid rgba(0,0,0,0.1);
  display:grid;
  place-content:center;
  padding:2em 2em;
  border-radius:6px;
}

【问题讨论】：

由于您使用的是 bootstrap4，因此您可以添加适用于这种特定情况的类 mb-5 或 mb-4，也可以添加类 shadow 以检查这是否真的远离底部。
@theTradeCoder ：感谢您的回答，但不幸的是，间距实用程序似乎不适用于我的情况。正如Siddharth Shyniben 所说，这可能是我愚蠢地忘记了position: absolute 造成的。我必须将其删除才能使间距实用程序正常工作。我想我会做，但不是现在，他的解决方案似乎奏效了，所以我会接受的。 Here's a preview of the result!
好吧，我终于找到了，你可能还需要对每一件事都进行这样的编码，无论你需要从底部得到什么，在这种情况下，你可以在 main 中添加一些底部填充容器或（身体）一次，然后你就不需要每次都做它

【解决方案1】：

您可以尝试像这样使用翻译：

.signup {
  transform: translateY(-10%)
}

我认为position: absolute 是问题所在。

您可以访问this 了解有关居中的更多信息：这非常有帮助！

【讨论】：