so, basically what i want to do is use javascript to get the height of the "body" and the height of the "div class=main-container" then if the content in the main container is substantial enough that it causes the "main container" height to be greater than the "body" height i want the Position: fixed; property on the ".footer-section" to be changed to position: relative; so that it does not overlap the content but rather "disappears" off the end of the page and is only visible when you scroll down. i am not sure if i am doing something wrong in the javascript or the CSS or maybe both?
i threw together a jsfiddle here: https://jsfiddle.net/udsv4t4y/1/
to start here is the javascript:
function resizeFunction() {
var x = document.getElementsByTagName("body").offsetHeight;
var y = document.getElementsByClassName("main-container").offsetHeight;
var z = document.getElementsByClassName("footer-section");
if (x < y) {
z.className += "responsive";
} else {
z.className = "footer-section";
}
}
here is the HTML i am working with:
<body onresize="resizeFunction" onload="resizeFunction">
<div class="main-container">
<div class="row"></div>
<div class="col-12">
Lorem ipsum dolor sit amet, (cut out due to length)
</div>
<div class="row"></div>
<div class="col-12">
<div class="footer-section"></div>
</div>
</div>
</body>
and the CSS:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}
.main-container {
min-height: 100%;
width: 100%;
margin: 0;
}
.footer-section {
position: fixed;
bottom: 0;
height: 60px;
width: 100%;
background: #428cd9;
}
.footer-section.responsive {
position: relative;
bottom: 0;
height: 60px;
width: 100%;
background: #428cd9;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
}
.col-12 {width: 100%;}
There is a much simpler way—just use min-height.