我已经在这里搜索了相关问题，看来我的情况有点独特。
我有一个 jQuery 幻灯片，我想100%用纯 CSS 制作浏览器的宽度和高度。
我可以100%通过我的流畅布局获得宽度并使其与页面一起拉伸，但是当我尝试将其设置为高度100%时，图像会完全消失。
它迫使我用像素定义高度。
我将有一个页脚和页眉，它们100%在图像/背景上拉伸宽度，每个里面都有一个960px宽的包装器。
这是HTML结构：
<div class="page-section header clear">
<div class="wrapper clear">
<div class="logo clear">
</div>
</div>
</div>
<div class="page-section clear">
<!-- 100% width -->
<div id="revolver">
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
</div>
</div>
<div class="footer page-section clear">
<div class="wrapper">
<div class="footer_nav clear">
<div class="footer_nav_text">
SERIES
</div>
</div>
</div>
</div>
这是CSS：
body {
min-height:100%;
}
img. {
max-width:100%;
}
.page-section {
width:100%;
height:100%;
margin:0px auto 0px auto;
}
.wrapper {
width:960px;
margin:0px auto 0px auto;
padding:0px 20px 0px 20px;
}
/* header */
.header {
height:27px;
background-color:#fff;
position:absolute; top:20px;
z-index:100001;
}
#revolver {
background-color:#ccc;
max-width:100%;
max-height:100%;
z-index:10001;
}
.revolver-slide {
background-color:#fff;
max-width:100%;
max-height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.footer {
height:25px;
background-color:#fff;
z-index:1000001;
position:relative;
margin-bottom:15px;
border:1px #000 solid;
}