Bootstrap footer is overlapping the content on small screens? - css

Question

I have an issue with my bootstrap layout.
Basically, everything looks OK on larger screens but on smaller screens my footer overlaps the content or the content overlaps the footer!
This is the code I have: https://jsfiddle.net/xpvt214o/639029/
If you make the HTML part larger and smaller and look at the footer, you will see the issue.
This is my full code:
html,body,.col-md-12,.row {
height:100%;
}
.row > div {
height:100%;
}
.YOsidemenu{
padding:0;
font-weight:bold;
background-color: #ffc90e;
padding-top:10px;
max-width:200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu{
display:none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color:red;
}
.row .col-sm-10 {
background-color:green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
Sidebar content
</div>
<div class="col-sm-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>[phone]</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->
Could someone please be kind enough and help me with this issue?
Thanks in advance.

Answer 1

Try removing height: 100% from the div. On mobile the container is 100% high, but because the columns get stacked and each column inherits the height, you have a parent with 100% height and two columns with each 100%, making it 200% of height.

Answer 2

Is this what you are looking for?
html,
body,
.col-md-12,
.row {
height: 100%;
}
.row>div {
height: 100%;
}
.YOsidemenu {
padding: 0;
font-weight: bold;
background-color: #ffc90e;
padding-top: 10px;
max-width: 200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu {
display: none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color: red;
}
.row .col-sm-10 {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2 col-xs-2">
Sidebar content
</div>
<div class="col-sm-10 col-xs-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>[phone]</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->