如何在 HTML 和 CSS 中创建固定页脚

Question

我已经为我的网站创建了固定页脚：

HTML

<div class="card footerBF">
  <div class="card-body space-around">
    <button
      type="button"
      class="buttonBF"
      routerLink="/myRouter"
    >
      <i class="fa fa-lock fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonBF"
      routerLink="myRouter"
    >
      <i class="fa fa-globe fa-lg"></i>
    </button>
    <button type="button" class="buttonBF" routerLink="myRoute">
      <i class="fa fa-plus fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonBF"
      routerLink="myRouter"
    >
      <i class="fa fa-home fa-lg"></i>
    </button>
  </div>
</div>

CSS

.footerBF {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
}

.buttonBF {
  background-color: white;
  color: grey;
  display: inline-block;
  border: none;
  cursor: pointer;
}

问题是，当我滚动时，我的页脚移动了，尽管应该是固定的。我附上一张图片来展示这个效果：

Answer 1

固定底部导航栏有 Bootstrap UI 个元素，每个元素都有 props 来执行此操作...查看 Fixed bottom

<nav class="navbar fixed-bottom">
  // Buttons
</nav>

但是，如果您希望问题中的当前代码按预期工作。我只是将 footer 设置为 display: flex，给它一个 height 和 justify-content 和 align-items center.

body {
  background: black;
  height: 2000px;
}

.footerBF {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f1f1f1;
}

button {
  background-color: white;
  border: none;
  cursor: pointer;
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />

<body>
  <div class="card footerBF">
    <div class="card-body">
      <button type="button">
      <i class="fa fa-lock fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-globe fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-plus fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-home fa-lg"></i>
    </button>
    </div>
  </div>
</body>

如何在 HTML 和 CSS 中创建固定页脚

How to create a fixed footer in HTML and CSS

html

css

footer

bootstrap-4