Как сделать слайд-шоу изображений 100% ширины и высоты браузера

Question

Я просмотрел здесь относительные вопросы, и мне кажется, что моя ситуация немного уникальна.

У меня есть слайд-шоу jQuery, что я хочу сделать 100% ширину и высоту браузера с чистым CSS.

Я могу получить ширину 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/