Часть моего нижнего колонтитула исчезает со страницы

Question

Мой нижний колонтитул, когда полный экран добавляет пространство справа и когда я использую, например, мобильный просмотр, часть моего нижнего колонтитула исчезает. Я просто хочу, чтобы он оставался внизу и не покрывал какой-либо контент. Даже когда оно сжимается для мобильного просмотра.

[![De red line is the extra space im talking about][1]][1]
#footer {
  position: absolute;
  left: 0;
  bottom: 0 !important;
  width: 100%;
  height: 2.5rem;
  padding-right: 0;
  background-color: black;
  border-top: 4px solid #F2D380;
  overflow: auto;
}

#footer a {
  color: white;
  text-decoration: none;
}

<div id="footer">
  <div class="row text-center justify-content-center">
    <div class="col-lg-2 ">
      <a href="#"> Company Information </a>
    </div>
    <div class="col-lg-2">
      <a href="#"> Privacy Policy and User Agreement </a>
    </div>
    <div class="col-lg-2">
      <a href="about.html"> About </a>
    </div>
    <div class="col-lg-2">
      <a href="about.html"> ©2019 Copyright claim </a>
    </div>
    <div class="col-lg-2">
      <a href="#">
        <img src="images/linkedin.png" class=" socialIcon">
      </a>
      <a href="#">
        <img src="images/instagram.png" class=" socialIcon">
      </a>
      <a href="#">
        <img src="images/facebook.png" class=" socialIcon">
      </a>
      <a href="#">
        <img src="images/youtube.png" class="socialIcon">
      </a>
    </div>
  </div>
</div>

Answer 1

Указав height: 2.5rem, вы задали нижний колонтитул фиксированной высоты, и он не будет масштабироваться в соответствии с содержимым, которое вы в нем указали. Попробуйте height: auto или height: max-content, потому что кажется, что ваш контент больше самого нижнего колонтитула. Также поставьте margin: 0, чтобы убедиться, что вокруг него нет свободного места

Answer 2

Таким образом, вопрос о том, почему пространство добавляется и охватывает контент, связано с абсолютным позиционированием. Если вы не хотите, чтобы он охватывал контент, у вас есть пара вариантов. Установите упаковщик содержимого на заданную высоту, а нижний колонтитул - на остальную часть этой высоты, чтобы нижний колонтитул оставался видимым внизу и не покрывал содержимое.

Если вы просто хотите, чтобы он действовал как нижний колонтитул и находился в нижней части мобильного устройства, я бы просто установил его как относительное положение.

Трудно представить, к чему вы стремитесь, без другой контент на странице.