Question

我已经用Google搜索了它，但是找不到任何可行的解决方案；在下面的示例中，position:absolute并未将页脚设置在页面底部

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <div class="footer">
    <p>Footer</p>
  </div>

</body>

</html>

如果滚动它，我会得到：

我希望页脚固定在页面底部，谁可以这样做？

Answer 1

使用position: fixed代替position: absolute，请根据您的代码检查以下工作示例。

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <div class="footer">
    <p>Footer</p>
  </div>

</body>

</html>

位置：页脚绝对不按预期工作

1 个答案: