【问题标题】: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%;
}

【讨论】:

【解决方案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】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-10-22
    • 2017-10-03
    • 2020-12-05
    • 2017-04-04
    • 1970-01-01
    • 1970-01-01
    • 2012-07-30
    • 2019-06-01
    相关资源
    最近更新 更多