Question

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

这是我要创建的布局： 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。

固定页眉和页脚，中间有滑块的自动高度

1 个答案: