Full screen background slideshow messing up responsive sticky footer

Question

I am trying to position a sticky footer in its place but my full screen background slideshow somehow moves it up under the content. I am following a responsive sticky footer tutorial from this site Sticky footer tutorial where the page content is set as display:table and the footer is set as a display:table-row. This works great until I introduce my slideshow to the picture. Once I remove the slideshow the sticky footer works!. Is there a way to fix this problem and keep the sticky footer at the bottom?. You can see the problem live here link with the problem.

My CSS and HTML is

<!DOCTYPE html>
<html>
    <head>
        <title> HTML Structure</title>
        <script type="text/javascript" src="/jquery-2.1.4.min.js"></script> 
        <script type="text/javascript" src="/jquery-bgstretcher-3.3.1.min.js"></script> 
        <style>
        html {
        height: 100%;
        overflow: hidden;
        }

        body {
        height: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        }

        .site {
        display: table;
        height: 100%;
        table-layout: fixed;
        width: 100%;
        }

        .site-content {
        width: 100%;
        color:#FBF7F7;
        text-align:center;
        background:#2DEFEC repeat;
        height:200px;
        margin-bottom:10px;
        }

        .site-footer {
        display: table-row;
        height: 1px;
        background:#2A1818 repeat;
        width:100%;
        color:#FBF7F7;
        text-align:center;
        }

        .bgstretcher-area {
        text-align: left;
        }
        .bgstretcher {
        background: black;
        overflow: hidden;
        width: 100%;
        position: fixed;
        z-index: 1;
        }
        .bgstretcher,
        .bgstretcher ul,
        .bgstretcher li {
        left: 0;
        top: 0;
        }
        .bgstretcher ul,
        .bgstretcher li {
        position: absolute;
        }
        .bgstretcher ul,
        .bgstretcher li {
        margin: 0;
        padding: 0;
        list-style: none;
        }
        /*  Compatibility with old browsers  */
        .bgstretcher {
        _position: absolute;
        }
        .bgs-description-pane {
        display: block;
        background: rgba(0, 0, 0, 0.7);
        position: relative;
        z-index: 10000;
        padding: 15px;
        color: #ffffff;
        font-size: 14px;
        }       
        </style>
    </head>
    <body>
        <div id="page" class="hfeed site">
            <header id="masthead" class="site-header" role="banner"></header>
            <div id="content" class="site-content">I am just some content!</div>
            <footer id="colophon" class="site-footer" role="contentinfo">I am a footer</footer>
        </div>
    </body>
    <script type="text/javascript">
        jQuery(function($){
        $("body").bgStretcher({
        images: ["/1-1.jpg", "/2-1.jpg"], 
        imageWidth: 1024,
        imageHeight: 768
        }); 
        }); 
        </script>
</html>

Stickers · Accepted Answer · 2015-10-01T01:26:12.280

1

You should make a complete table layout in order to have the sticky footer to work properly. Check out the following simplified demo and read the comments inline, see if you're missing anything important.

jsfiddle

html, body, #page {
    height: 100%; /*make the elements to cover the whole page height*/
    margin: 0;
}
#page {
    display: table;
    width: 100%;
}
.site-header,
.site-content,
.site-footer {
    display: table-row; /*for all the three sections*/
}
.site-content {
    height: 100%; /*push header and footer to their minimum height */
    background: silver;
}

<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">header</header>
    <div id="content" class="site-content">I am just some content!</div>
    <footer id="colophon" class="site-footer" role="contentinfo">I am a footer</footer>
</div>

Update, that jQuery plugin OP's using, added some container divs around #page, so either set them all to height:100%;, or simply set #page{height:100vh;} revised jsfiddle.

edited Oct 01 '15 at 01:26

answered Oct 01 '15 at 00:16

Stickers

75,527
23
147
186

Pangloss, thank you for your answer. Yes the sticky footer works but only when the slideshow script is not present in the code. As soon as I add the slideshow script and its CSS the footer messes up. I have updated the link with your simplified complete table. But as you can see unfortunately the footer is up on the top. Thanks again... – yathrakaaran Oct 01 '15 at 01:14
1

Try this `#page{height:100vh;}`, it you can't use viewport units, you'll need to use browser dev tools to find all the parent elements of `#page` and set them all to `height:100%`, obviously that plugin added many div contianers. – Stickers Oct 01 '15 at 01:19
!That works! Thank you so much for your help! I am newbie so I am trying to understand this, can you tell me why this works? Why vh works vs 100% on #page ? – yathrakaaran Oct 01 '15 at 01:53
1

That is a very common question, i.e. see [here](http://stackoverflow.com/questions/1622027/percentage-height-html-5-css). – Stickers Oct 01 '15 at 02:01
Accepted as correct answer. I found and changed the heights to 100% on parental elements of #page and it works. Thanks for the link I appreciate you taking the time so that I can learn further! – yathrakaaran Oct 01 '15 at 02:07

Full screen background slideshow messing up responsive sticky footer

1 Answers1