Sticky Footer Issue - CSS - html

Question

So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}

Answer 1

have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.

Answer 2

in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.

Answer 3

Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.