时间戳

首页 > 解决方案 > 我的页脚的一大块从页面上消失了

html - 我的页脚的一大块从页面上消失了

问题描述

全屏时我的页脚在右侧增加了空间，当我使用例如移动视图时，我的页脚的一部分消失了。我只是希望它停留在底部而不涵盖任何内容。即使它缩小到移动视图。

[![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>

在此处输入图像描述

标签： htmlcss

解决方案

所以为什么要添加空间并覆盖内容的问题是因为绝对定位。如果您不希望它涵盖内容，您有几个选择。将内容包装器设置为设定的高度，将页脚设置为该高度的其余部分，以便页脚在底部保持可见并且不会覆盖内容。

如果您只是希望它充当页脚并位于移动设备的底部，我只需将其设置为相对位置即可。

如果没有页面上的其他内容，很难想象您的目标是什么。

推荐阅读