CSS位置固定底部页脚答案

【问题标题】：CSS position fixed bottom footerCSS位置固定底部页脚
【发布时间】：2016-12-01 14:44:48
【问题描述】：

我正在尝试将页脚固定到底部，尽管我在页面上。我试过了

.home-footer{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 5;
}

但它只有在我将页脚放在正文之外并将其放置在 html 元素的正下方时才有效。我怎样才能使这项工作同时保持在体内？

编辑我发现问题是我的身体有transform: translateX(0)。这似乎与固定页脚冲突，因为一旦我摆脱它，它就起作用了。但是，我需要这条规则，否则我的导航会中断。

【问题讨论】：

我们需要查看您的 HTML 和 CSS 的其余部分才能确定问题所在。

标签： css footer fixed

【解决方案1】：

将此添加到您的 CSS 中：

html, body {
  width: 100%;
  height: 100%;
}

【讨论】：

最初将它推到底部，但是当我向下滚动时，它不会随页面滚动。
我想答案就在这里-> stackoverflow.com/questions/5189238/…

【解决方案2】：

试试这个：

HTML：

<body>
  <div class="container">
    <footer>Your footer</footer>
  </div>
</body>

CSS：

// wrapper in your body, where your footer will be in
.container {
   position: absolute;
   top: 30px;
}

footer {
   position: relative;
   bottom: 0;
   width: 100%;
   height: 20px;
}

【讨论】：

这不是我想要的。我希望 CSS 始终在屏幕上可见，但在底部。因此，它会随着我们滚动页面而移动。
我更新了我的问题。基本上这是在身体上进行变换的问题，这似乎与固定位置的页脚冲突。

【解决方案3】：

我发现问题在于对正文应用变换与固定页脚之间存在冲突。像这样将这两个规则组合在一起似乎存在问题。我对我的动画使用了左定位，而不是变换，它解决了这个问题。这并不理想，但确实有效。

【讨论】：