A chunk of my footer disappears from page - html

Question

My footer when full screen adds space to the right and when i use for example mobile view a chunk of my footer disappears. I just want it to stay at the bottom and not cover any content. Even when it shrinks to mobile view.
[![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 ">
Company Information
</div>
<div class="col-lg-2">
Privacy Policy and User Agreement
</div>
<div class="col-lg-2">
About
</div>
<div class="col-lg-2">
©2019 Copyright claim
</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

So the issue of why the space is added and it covers content is because of the absolute positioning. If you do not want it to cover content you have a couple options. Set the content wrapper to a set height and the footer to the rest of that height so the footer stays visible at the bottom and wont cover content.
If you just want it to act as a footer and be at the bottom on mobile I would just set it to be position relative.
It is hard to envision what you are going for without other content on the page.

Answer 2

By specifying height: 2.5rem, you have given the footer a fixed height and it won't scale according to the content you have provided in it. Try height: auto, or height: max-content, because it seems your content is larger than the footer itself.
Also put margin: 0 to ensure no space is added around it