固定的頁眉和頁腳具有自動高度的中間滑塊

Question

我正在嘗試創建一個網站，該網站的頁眉和頁腳固定，並且整個中間都是圖像滑塊...。因此，它只是一個完整的瀏覽器網站。 由於某種原因，我無法使圖像充滿整個內容，因此我也試圖使其具有響應性，這似乎也不起作用。 我需要使用javascript來檢測瀏覽器的高度，以便使圖像適合它還是有插件？ 我主要嘗試使用height：100％的CSS進行處理，然后在頂部和底部添加填充。

這是我要創建的布局： http : //jsfiddle.net/PV6sE

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

任何幫助，將不勝感激！ 我已經堅持了幾個小時！

Answer 1

這是將圖像調整為完整大小的JavaScript：

注意180 =頁眉和頁腳的高度之和。

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);

    });
};

這是幻燈片的代碼：

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);

我對HTML所做的唯一更改是將<div class="banner"></div>更改為ul 。

這是您更新的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%;
}

這是一個工作的jsfiddle 。