fit footer on bottom of viewport on dynamically page height changing
Question
I want fit my page footer bottom of the view port when my page content height is less than the height of view port. If the page height exceeds that of the view port, the footer should go below that content.
I have checked height of the view port and changed that. But on some scenarios it's not working.
HTML:
<div id="page" class="page">
<div id="header"></div>
<div id="contentWrapper"></div>
<div id="footer"></div>
</div>
Javascript:
var vpHeight = getViewPort().height;
var contentHeight = $("#contentWrapper").height();
if (contentHeight < vpHeight) {
$("#footer").css("position", "absolute");
$("#footer").css("bottom", "0");
$("#goToTop").hide();
}
else {
$("#footer").css("position", "static");
$("#footer").css("bottom", "auto");
$("#goToTop").show();
}
function getViewPort() {
var e = window, a = 'inner';
if (!('innerWidth' in window)) {
a = 'client';
e = document.documentElement || document.body;
}
return { width: e[a + 'Width'], height: e[a + 'Height'] }
};
1 answers
solution1
0 2013-09-17 13:52:10
Try that example:
<body>
<div class="page-wrapper">
<div class="page-buffer"></div>
</div>
<div class="page-footer">
</div>
</body>
And CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -50px;
}
* html .page-wrapper {
height: 100%;
}
.page-buffer {
height: 50px;
}
It should work and you don't need JS in that case.
The original article was written and in russian: http://www.zakharov.ms/footer/ But you can use chrome translate function to get how it works.
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.