Menu
At the moment I'm trying to keep the footer at the bottom with Javascript. This is the result:
document.getElementsByTagName('body').onload = function() {KeepFoot()};
var element = document.getElementById('container');
var height = element.offsetHeight;
function KeepFoot() {
if (height < screen.height) {
document.getElementById("footer").style.position = "fixed";
document.getElementById("footer").style.bottom = "0";
document.getElementById("footer").style.left = "0";
document.getElementById("footer").style.right = "0";
}
}
My idea was to take the height of the div container and compare it with the height of the resolution of the pc. If the height of the div container is smaller than the height of the resolution of the PC, set to the div footer position: fixed;
But there is a problem in the script because it doesn't work.
Another question, the script that I created would be fine for keep the footer at the bottom?
HTML:
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
585
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
If you wrap the content in a tag and set the margin-bottom value to the same as the footer-height, you would be able to read the text that the footer was originally covering.
Create a footer div with position: absolute; bottom: 0; and the desired height. Set the padding of the footer to add whitespace between the content bottom and the window bottom. Create a container div that wraps the body content with position: relative; min-height: 100%;
The code sample below shows the script to make a header and footer with Javascript. function createHeaderAndFooter() { var header="<! --header html-->"; var footer="<!
The function is not being called on load. You can attach the function KeepFoot directly to the body tag like this Instead of calling like this:
document.getElementsByTagName('body').onload = function() {KeepFoot()};
or use my code from below:
(function() {
var offsetHeight = document.getElementById('container').offsetHeight;
var screenHeight = screen.height;
if(offsetHeight < screenHeight){
document.getElementById("footer").style.position = "fixed";
document.getElementById("footer").style.bottom = "0";
document.getElementById("footer").style.left = "0";
}
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
