0

我正在尝试创建一个具有固定页眉和页脚的网站，并且整个中间都是一个图像滑块......所以它只是一个完整的浏览器网站。出于某种原因，我无法让图像填充整个内容，我还试图使其具有响应性，但这似乎也不起作用。我是否需要使用 javascript 来检测浏览器高度以便我可以将图像适合它或者是否有插件？我一直在尝试使用 height:100% 的 CSS 来实现，然后在顶部和底部引入填充。

这是我要创建的布局：http: //jsfiddle.net/PV6sE

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

任何帮助，将不胜感激！我已经坚持了好几个小时了！

4

1 回答 1

2

这是将图像大小调整为完整大小的 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。

于 2013-08-29T04:54:26.313 回答