当我水平滚动时，我绝对定位的页脚会被切断

Question

body {
z-index: 0;

width: 100%;
height: 100%;
margin: 100px 0 0 0;
padding: 0;
}
#footer {
    position: absolute;
    bottom: 0;

    width: 100vw;
    height: 100px;

    color: #ffffff;
    background-color: #000000;

    font-family: sans-serif;
    font-size: 25px;
    text-align: center;
    line-height: 100px;
    letter-spacing: 25px;
}

我该如何解决这个问题？

此外，任何有关粘性页脚的建议都会受到高度赞赏。我挣扎着......

Answer 1

我认为这更多是关于HTML的结构。例如，您的某些页面内容比其他内容更宽，因此您设置宽度的页脚会落后。

尝试将所有内容包装在容器中，确保使用width:100%;，然后该容器内的任何内容都不应超过100％

如果有的话。例如一节的宽度：150％;然后你就会遇到你现在面临的问题。按照这个演示。

header {
  height: 10vh;
  width: 100%;
  background: #333;
}

section {
  height: 70vh;
  width: 150%;
  background: #ccc;
}

footer {
  height: 10vh;
  width: 100vw;
  background: #333;
}

<div class="container">
  <header>
  </header>
  <section>
  </section>
  <footer>
  </footer>
</div>

Answer 2

使用溢出：隐藏; 以避免滚动，我添加了下面的代码段

＆＃13;

＆＃13;

body {
z-index: 0;

width: 100%;
height: 100%;
margin: 100px 0 0 0;
padding: 0;
}
#footer {
    position: absolute;
    bottom: 0;

    width: 100vw;
    height: 100px;
  overflow:hidden;

    color: #ffffff;
    background-color: #000000;

    font-family: sans-serif;
    font-size: 25px;
    text-align: center;
    line-height: 100px;
    letter-spacing: 25px;
}

＆＃13;

<div id="footer">
  your footer 
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

据我了解您的问题，您的目标是在页面的最底部设置页脚。

Here就是这种布局的例子。

诀窍是将页脚放在相对定位的所需最小宽度包装内。所以它可能像

一样工作

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
}

Answer 4

我认为您可能想要的是position: fixed，bottom: 0和width: 100%。

编辑：

如果为页面内容设置宽度，然后为页脚设置相同的宽度，该怎么办？请参阅此jsfiddle。