Footer not on bottom of page - html

Question

I'm trying to create a footer class however it seems to be at the bottom of my .body-wrap class as opposed to the actual page.
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
I'm also using a bootstrap sidebar template. Found here: http://startbootstrap.com/template-overviews/simple-sidebar/
Help would be appreciated.

Answer 1

Please try to add this code:
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
}

Answer 2

Use position:fixed with bottom:0 it will remain stable at bottom of page
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
bottom:0;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>

Answer 3

You would need position: fixed and bottom: 0 on your footer-wrap. Check the update below!
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>

Answer 4

.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
width:100%;
border: 1px black solid;
position: absolute;
bottom:0px;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>

Answer 5

Add width and height to your .body-wrap and width to footer too. Changes footer position as in below codes.
.body-wrap {
width:200px;
height: 200px;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
background:#111;
color:#fff;
}
.footer-wrap {
border: 1px black solid;
z-index: 9;
height: 3em;
text-align: center;
background:#f22;
bottom:0;
position:absolute;
width:100%;
}