Remove Auto Added Wrappers In Joomla? - css

Question

I have a layout that uses 100% height DIVs. When I add the footer however it jumps to the first DIV and floats somewhere around the middle of it. I looked at the code and it seems .articleBody and item-page are the parents of my children DIVs but according to the inspector only wraps the first DIV (all the DIVs are inside of container and the DOM tree has my 100% height DIVs as children).
I have tried using position absolute, giving the footer a height and trying to force it to bottom. It only forces it to the bottom of the first 100% height DIV.
My only thought now is if I can remove .articleBody and item-page to solve this problem? If they are only wrapping the first DIV maybe the .container-fluid would be the only parent and the footer can rest at the bottom. If anyone else has another solution, I'm all ears, I just need this issue fixed as it's dragged on for a while. For the record, I am loading Bootstrap 3 successfully.
Thank you!
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{
height: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

The only way I found is by changing the core code. It is very easy, but it is never good to change core files from Joomla.
The file is located:
/components/com_content/views/article/tmpl/default.php