Question

我有响应式网页。我的问题是，当页脚在小屏幕设备上呈现时，页脚会在页面中间结束。当我在宽度小于1200像素的设备上进行测试时，页脚在屏幕位置后立即结束。这是我在小屏幕上看到的（宽度小于1200px）：

Fixed size

在超过1200px的屏幕上（这是我应该在小屏幕设备上获得的）： Full size

其中：

绿色 - 页面大小
红色 - 屏幕尺寸
蓝色 - 页脚

然后是我的代码：

<footer>
    <p>Footer text</p>
<footer>

footer {
    position: relative;
    bottom: 0;
    clear: both;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

编辑：position: fixed;无法解决，因为我需要在页面底部，而不是屏幕。

Answer 1

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 500px) {
   footer {
      position: relative;
   }
}

<footer>
  <p> Footer Text here</p>
</footer>

在示例中，断点为500px而非1200px。尝试调整浏览器窗口的大小，看看它是怎么回事。

Answer 2

您尝试解决的问题称为粘性页脚，不应使用position: fixed解决。还有其他解决方案可以为您提供更好的结果，如使用Flexbox

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

更多相关信息：https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Answer 3

由于未知原因，对于小于1200px的设备，高度设置为100％。 CSS：

@media screen and (max-width: 1200px) {
    #base {
        ....
        height: 100%;
    }
}

仅删除此行，一切正常。有这样的页面结构：

<body>
  ....
  <div id="base">
    .....
  </div>
</body>
<footer>..</footer>

页脚在小屏幕上不会绑定到底部

3 个答案: