CODEWITHSUNDEEP
javascripthtmlcssfooter
Daniel
Daniel

Reputation: 15

controlling css footer that is overlaping content with javascript

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%;}

Upvotes: 0

Views: 50

Answers (2)

Quinn
Quinn

Reputation: 136

There is a much simpler way—just use min-height.

https://jsfiddle.net/e8ss46qw/1/

Upvotes: 2

Deep
Deep

Reputation: 9794

Since you are the main container is inside the body hence if the height of main container goes up so will the height of body.

You will have to check the height of the main container with the current height of window.

the second issue is the way , you are selecting elements

var x = document.getElementsByTagName("body").offsetHeight;
var y = document.getElementsByClassName("main-container").offsetHeight;
var z = document.getElementsByClassName("footer-section");

document.getElementsByTagName and document.getElementsByClassName return the node list of all the element satisfying the criteria. toy can not do .offsetHeight on node list . You will have to het the individual node.

you can use querySelector for this.

var x = document.querySelector("body").offsetHeight;
var y = document.querySelector(".main-container").offsetHeight;
var z = document.querySelector(".footer-section");

fiddle: https://jsfiddle.net/k3qgc88j/

Upvotes: 1

Related Questions