Как создать фиксированный нижний колонтитул в HTML и CSS - PullRequest
Новая
       25

Как создать фиксированный нижний колонтитул в HTML и CSS

0 голосов
/ 17 ноября 2018

Я создал фиксированный нижний колонтитул для своего сайта:

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;
}

Проблема в том, что при прокрутке мой нижний колонтитул перемещается, даже если предполагается, что он исправлен. Я прилагаю одну фотографию, чтобы показать этот эффект:

enter image description here

1 Ответ

0 голосов
/ 17 ноября 2018

Существуют элементы пользовательского интерфейса Bootstrap для фиксированной нижней панели навигации, каждый с props, чтобы сделать это ... проверить Фиксированное основание 

<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>
...