getting consistent footer spacing - html

Question

So guys, im simply trying to have a clean footer that will appear at the end of the page content consistently, whether or not the content fills up the length of the page.
As of now, I've tried a few options, first, i've done it with a sticky footer:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding: 1em;
background:#EFDECD; //#5ee;
text-align: center;
}
.mydiv{
height:calc(100% - 4em);
}
p{
font-family: Verdana, Geneva, sans-serif;
}
.paragraph{
font-size: 1em;
//font-family: Charcoal, sans-serif;
}
#content {
padding: 1em;
padding-bottom: 7em; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:4em;
// position: fixed;
bottom: 0;
left: 0;
background: #EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
//header{
////margin-top: 3ems;
// background-color: lightgrey;
//}
//footer{
// height: 5em;
// background-color: lightgrey;
// position: relative;
// bottom: 0px;
// width: 100%;
//
//}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headingtext{
font-family: Century Gothic, sans-serif;
}
.headtext{
display:inline-block;
// font-size:3em;
margin: 0 10em;
text-align: center;
// font-family:"Courier New";
// font-weight: bold;
// margin-left: 6em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
.top-bar-section .right li .dropdown { /* left: auto; */ right: auto; }
dl.tabs dd{background-color:$oil;}
which works, but the footer is always visable and takes up screen space when there is important content on the page.
Ideally, I would like to change the position to 'absolute' and that looks fine on all the pages except on a page where there is not enough content, then the footer appears just below the content, and leaves a large white space gap from the footer to the bottomn of the page.
How can I simply make it so the footer always appears at the bottom of the page regardless of the page length? Also, feel free to inspect element to help. Currently its using the fixed position:
http://ops.emsofl.com/

Answer 1

A way to do it : set body and html to 100% height, then:
<div style="height:calc(100% - 30px);">
<!-- 30px for footer -->
<!-- header and content will be here -->
</div>
<footer style="height:30px;">must be fixed height</footer>
So, if you content is long, footer appears after it, if the page is empty, div will occupancy the whole screen anyway.
UPDATE try if it works in your browser jsfiddle
P.S. I've got a small netbook and don't see much of your page as it is, just header, footer and two lines of content (OK, may be ten lines :) )

Answer 2

You could move the footer into the content div and work with the position: absolute method you did.
It seems your body tag is not getting the full height of the page.. which probably is because you are floating elements and not clearing them properly, or you're using elements in the content div which are positioned absolute.. I haven't really checked the rest of the page..
Hope this helps.