Fixed Header and Footer with auto height for slider in middle

Question

I am trying to create a website that has a fixed header and footer and for the entire middle to be an image slider....So its just a full browser website. For some reason I can not get the image to fill the entire content I am also trying to make it responsive which doesn't seem to work either. Would I need to use javascript to detect the browser height so I can fit the image to it or is there a plug in? I've been mostly trying to do it with CSS with height:100% then bringing in the padding on the top and bottom.

Here is the layout I am trying to create: http://jsfiddle.net/PV6sE

<header>
<div class="top"></div>
<div class="bottom"></div>
</header>
<div class="banner"></div>
<footer></footer>

Any help would be appreciated! I've been stuck on this for hours!

Answer 1

Here's the JavaScript which resized the image to the full size:

Note the 180 = the height of the header and footer combined.

window.onload = window.onresize = function () {
    $('img').each(function () {
        this.style.width = '100%';
        this.style.height = '';

        if (this.clientHeight < $(window).height() - 180) {
            this.style.width = '';
            this.style.height = $(window).height() - 180;
        }

        $(this).parent().css('height', $(window).height() - 180);

    });
};

And Here's the code for the slideshow:

var interval = 2500;
var array = $($('.banner li').get().reverse());
setInterval(function() {
    for (var i = 0; i < array.length; i++) {
        $(array[i]).delay(interval * (i + 1)).fadeOut(300);
        $(array[i]).delay((interval-100) * (array.length - 1 - i)).fadeIn();
    }
}, interval*array.length);

The only change I made to your HTML was I changed <div class="banner"></div> to a ul .

Here's your updated CSS

body {
    margin: 0;
    padding: 0;
}
header {
    top: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
}
footer {
    background-color: blue;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    height: 71px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
}
.top {
    background-color:#964B2D;
    height: 38px;
}
.bottom {
    background-color:red;
    height: 71px;
}

.banner {
    position: relative;
    margin: 109px 0 71px 0;
    padding: 0;
    width: 100%;
}

.banner li {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    width: 100%;
}

Here's a working jsfiddle .