Joomla Footer Middle Of Page With 100% Height DIVs - html

Question

I have to use a Joomla framework and create 100% height DIVs. I have done this successfully. However when trying to add the footer, it flies up toward the top of the screen and covers everything.
Upon further inspection through the DOM I found something interesting: The automatically added by the framework classes .item-page and div itemprop="articleBody" have all the sections under their section in the DOM tree like they should HOWEVER they only encompass the first DIV in terms of height. So it looks like my footer is trying to fit within the first DIV.
For the record, I'm successfully loading Bootstrap 3.
Help is greatly appreciated.
HTML - INDEX.PHP
<div class="container-fluid">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</nav>
<jdoc:include type="message" />
<jdoc:include type="component" />
<!--END CONTAINER-->
</div>
<footer>
<div class="container">
<div class="row footer-container footer-row">
<div class="col-sm-3">
<div class="footer-logo">Logo</div>
</div>
<div class="col-sm-9">
<p class="footer-about">
About
</p>
<p class="footer-text">
Footer content here
</p>
</div>
<div class="col-sm-3">
<p class="footer-about">
Contact Info
</p>
</div>
</div>
</div>
</footer>
HTML - IN CODE EDITOR OF THE AFFECTED PAGE
<div class="container-fluid">
<div id="landing-bkg">
<div class="row">
<div class ="col-sm-7 col-xs-12">
<h1>Headline</h1>
<h3>Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END LANDING BKG-->
<div id="another2">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Headline</h2>
<h3 class="center">Subhead</h3>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER2-->
<div id="another3-bkg">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class ="col-md-7 col-sm-12 col-xs-12">
<h2>Headline</h2>
<h3> Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END NESTED COLUMN -->
</div>
<!-- END NESTED ROW -->
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER3 BKG-->
<div id="another4">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Subhead</h2>
<form>
<input type="email" placeholder="Input Field" class="center-block">
</form>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- ANOTHER 4 -->
</div>
<!-- END CONTAINER -->
CSS
/****HTML & BODY ****/
html,
body{
width:100%;
height:100%; //Makes my DIVs 100% height, works great
margin:0;
padding:0;
}
/****CONTAINER ****/
.container-fluid{
100%
}
/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/
.item-page{
height:100%;
}
div[itemprop="articleBody"]{
height:100% !important;
}
/**** FOOTER ****/
.footer-container{
background-color:#565A5C;
width:100%;
padding-top:50px;
padding-bottom:25px;
}
footer{
position:relative;
}
.footer-row{
width:100% !important;
margin:0 !important;
}

Answer 1

Not 100% sure of what you want but :
footer{
position:absolute;
bottom: 0;
}
should place the footer correctly. Then add paddings to other elements to avoid them covering the footer.