Question

我试图将我的页脚修复到底部，尽管我在页面上。我试过了

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

但它只有在我将页脚放在身体外部并将其放在html元素正下方时才有效。如何在保持体内的同时完成这项工作？

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

Answer 1

将此添加到您的CSS：

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

Answer 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;
}

Answer 3

我发现问题是将变换应用到身体和固定页脚之间存在冲突。将这两个规则结合在一起似乎存在一个问题。我使用左定位来制作动画，而不是变换，它修复了问题。它并不理想，但它有效。

CSS位置固定底部页脚

3 个答案: