blank space below footer in mobile view - html

Question

After so many efforts finally I have designed footer for my website. But whenever I reduce the browser size that is in mobile view I get a blank space below my footer. It is because of the margins added to the content inside footer for desktop view. Also I don't want to change the arrangement of the content inside footer. I tried many things but still not able to get rid of that blank space.
html:
<div class="footer" style="font-family: Georgia,Serif;">
<div class="container">
<div class="col-md-4 col-sm-4">
<ul class="list-unstyled list-inline" style="margin-left:50px">
<li><a style="color:white;font-size:20px" href="AboutUs.aspx">About Us</a></li>
<li><a style="color:white;font-size:20px" href="ContactUs.aspx">Contact Us</a></li>
</ul>
</div>
<div class="col-md-4 col-sm-4">
<p style="color:white;text-align:center;font-size:15px;margin-top:48px">© 2016 Ashwini All Rights Reserved</p>
</div>
<div class="col-md-4 col-sm-4">
<ul class="social-icons icon-circle list-unstyled list-inline" style="float:right">
<li> <i class="fa fa-facebook"></i></li>
<li> <i class="fa fa-twitter"></i></li>
<li> <i class="fa fa-google-plus"></i></li>
</ul>
</div>
</div>
</div>
css:
.footer {
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:100px;
}

Answer 1

You can remove the height for mobile screens.
Also you can align them centrally for mobile.
#media only screen and (max-width: 767px) {
.footer {
height: auto;
}
.footer ul{
text-align: center;
margin-left: 0;
padding-left: 0;
float: none;
}
.footer li{
display: inline-block;
margin: 0 5px;
}
}
https://jsfiddle.net/afelixj/3u3k4v06/

Answer 2

The problem here is, your CSS is currently like this
.footer
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:100px;
}
Where the height of the footer is fixed to 100px.
But your HTML content has three such <div class="col-md-4 col-sm-4"></div> divs .Your 3rd row is crossing the 100px threshold.
Change your min height to a greater value.Better option is to use % or vh
.footer
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:200px;
color:white;
}
Here is the working demo

Answer 3

try adding this css will resolve the issue.
#media only screen and (max-width: 500px) {
.footer p{
margin-top:0px !important;
}
}

Answer 4

You can make overflow:hidden;
Working Codepen: http://codepen.io/anon/pen/EKPrEB
.footer
{
overflow: hidden; /*MODIFICATION */
padding-bottom:2px; /*MODIFICATION */
position: absolute;
margin-bottom:0;
right: 0;
bottom: 0 !important;
left: 0;
background-color: #0E0E0E;
height:100px;
}