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中创建固定的页脚

1 个答案: