Stick a footer to bottom - without jQuery
Question
While trying to solve this issue, I was only running into jQuery plugins. But due to my site being tiny, I only use the jQuery alternative cash .
I would like to achieve the following behavior:
- When the page's content can not fill the viewport entirely, stick to bottom.
- If the content fills the screen, just end up underneath the content.
From what I read from the jQuery plugins, I'd need to calculate the height of my content, subtract that from the current viewport and see if the result is negative or not.
But since I don't use jQuery, how'd I do that?
My HTML's structure is (similar to) this:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<div id="MainPage">
<div class="menu"></div>
<div class="content"></div>
</div>
<footer></footer>
</body>
</html>
Everything except the footer is in a wrapping div .
3 answers
solution1
2 2015-05-17 18:05:00
You can get the height of the browser window (without scrollbars/toolbars) using:
window.innerHeight
Then you can get the height of the MainPage div using:
document.getElementById("MainPage").offsetHeight
Note that window.innerHeight will include the height of the horizontal scrollbar if one is present on the page, so account for it if you need to.
Once you have those two properties, you can calculate the sizes you need.
If all you want to do is stick the footer to the bottom of the page, you can also use CSS, eg
footer{
position: fixed;
bottom: 0px;
}
solution2
2 ACCPTED 2015-05-19 07:23:28
A good example (when knowing the height of your footer) is the Ryan Fait's HTML5 Sticky Footer.
http://ryanfait.com/html5-sticky-footer/
Ryan Fait's HTML5 Sticky Footer
HTML
<body>
<div class="wrapper">
<div class="push"></div>
</div>
<footer></footer>
</body>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
If you don't know the height, you could use:
HTML
<body>
<footer></footer>
</body>
CSS
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
jQuery
$( 'body' ).css( 'margin-bottom', $( 'footer' ).height() );
Of just plain Javascript
document.getElementsByTagName('body')[0].style.marginBottom = document.getElementsByTagName('footer')[0].offsetHeight + 'px';
solution3
1 2015-05-17 18:02:45
window.innerHeight gives you the height of the screen, getElementById().height gives you the height of an element.
So in your case you'd have in plain JS:
if (document.getElementById('MainPage').offsetHeight < window.innerHeight) {
document.getElementsByTagName('footer')[0].style.position='fixed';
}
Or you can add a class 'fixedFooter' instead of setting a CSS-property with document.getElementsByTagName('footer')[0].classname += ' fixedFooter'; and style this class via CSS. That will give you more controll. Eg:
.fixedFooter {
bottom: 0;
position: fixed;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.