Блог

Как я могу сделать свой нижний колонтитул

1. быть внизу, когда нечего прокручивать.
2. перемещение, когда содержимого много.

До сих пор у меня был следующий код CSS:

     * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.footer-link a {
    color: #5f5f79;
    font-size: 87.5%;
    text-decoration: none;
}
.footer-link {
    margin: 0px 60px;
}
.copy {
    color: #5f5f79;
    font-size: 87.5%;
    margin-top: 5px;
}
  

…и есть HTML:

 <div class="footer">
        <p class="footer-link"><a href="impressum.html">Impressum</a></p>
        <p class="copy">Coypright 2020</p>
        <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
      </div>
  

Вы могли бы внести следующее изменение:

 .footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  

Однако вам нужно убедиться, что элемент контейнера нижнего колонтитула имеет padding-bottom: 70px; значение -, означающее, что контейнер заполняет содержимое пикселями, равными высоте нижнего колонтитула. Таким образом, нижний колонтитул не будет закрывать содержимое.

Может быть, вы можете использовать jsfiddle, чтобы поместить весь код, который у вас есть.

Вам нужно изменить структуру HTML. Вам нужно создать оболочку div, внутри которой будут находиться ваш нижний колонтитул и ваш контент.

Вы хотите, чтобы ваш нижний колонтитул был привязан к нижней части оболочки, используя position: absolute и сохраняя padding-bottom: footer-height в оболочке div.

 * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrapper{
  position: relative;
  border:5px solid black;
  min-height: 100vh;
  padding-bottom: 70px;
}
.other-content{
  border:5px solid red;
  font-size: 34px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 150%;
  color: white;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-link a {
  color: #5f5f79;
  font-size: 87.5%;
  text-decoration: none;
}
.footer-link {
  margin: 0px 60px;
}
.copy {
  color: #5f5f79;
  font-size: 87.5%;
  margin-top: 5px;
}  

 <div class="wrapper">
  <div class="other-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis vero maiores odio nulla voluptas, officiis numquam modi ipsa reiciendis eos quae vel magnam doloremque, et culpa recusandae sint animi iste. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi unde similique quis reiciendis recusandae est dignissimos. Commodi porro reprehenderit ex ipsum, ullam excepturi adipisci quod, numquam nulla praesentium delectus magni!</div>
<!-- other content -->
  <div class="footer">
    <p class="footer-link"><a href="impressum.html">Impressum</a></p>
    <p class="copy">Coypright 2020</p>
    <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
  </div>
</div>