如何製作幻燈片圖片瀏覽器的寬度和高度都是100％

Question

我已經在這裏搜索了相關的問題，看起來好像我的情況有點獨特。

我有一個jQuery幻燈片，我想使用純CSS瀏覽器的寬度和高度爲100%。

我能夠得到寬度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; 
} 

Answer 1

是不是這樣呢？我已經把

html,body 
    {height:100%; 
    } 

http://jsfiddle.net/p4z8q/14/