use method terraform uses to keep footer at bottom of page

This commit is contained in:
captainill 2015-11-09 13:18:24 -08:00
parent 7bcba613b0
commit 45b1d47fab
4 changed files with 54 additions and 1 deletions

View File

@ -0,0 +1,48 @@
(function(){
var mainContentMin = 600;
var Init = {
start: function(){
var classname = this.hasClass(document.body, 'page-sub');
if (classname) {
this.addEventListeners();
}
},
hasClass: function (elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
},
addEventListeners: function(){
var _this = this;
//console.log(document.querySelectorAll('.navbar-static-top')[0]);
window.addEventListener('resize', _this.resizeImage, false);
this.resizeImage();
},
resizeImage: function(){
var header = document.getElementById('header'),
footer = document.getElementById('footer'),
main = document.getElementById('main-content'),
vp = window.innerHeight,
bodyHeight = document.body.clientHeight,
hHeight = header.clientHeight,
fHeight = footer.clientHeight,
withMinHeight = hHeight + fHeight + mainContentMin;
if(withMinHeight < vp && bodyHeight < vp){
var newHeight = mainContentMin + (vp-withMinHeight) + 'px';
main.style.height = newHeight;
}
}
};
Init.start();
})();

View File

@ -4,6 +4,7 @@
#= require lib/Base
#= require _app/docs
#= require _app/Sidebar
#= require _app/app
#= require _app/homepage

View File

@ -6,6 +6,10 @@ body.layout-docs,
body.layout-intro{
background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat;
#main-content{
min-height: 600px;
}
>.container{
.col-md-8[role=main]{
min-height: 800px;

View File

@ -3,7 +3,7 @@
<div class="col-md-4">
<%= yield_content :sidebar %>
</div> <!-- /col-md-4 -->
<div class="col-md-8" role="main">
<div id="main-content" class="col-md-8" role="main">
<div class="bs-docs-section">
<%= yield %>
</div>