Высота установки для отзывчивого дизайна

Question

Я делаю отзывчивый веб-сайт. Но я не могу установить высоту на чувствительную высоту. Кто-нибудь знает, как я могу это сделать с помощью CSS?

HTML:

<div class="container"> 
      <div class="slider_wrapper"> 
       <ul id="image_slider"> 
        <li><img src="images/slider-1.jpg"></li> 
        <li><img src="images/slider-2.jpg"></li> 
        <li><img src="images/slider-3.jpg"></li> 
        <li><img src="images/slider-4.jpg"></li> 
       </ul>     
       <span class="nvgt" id="prev"></span> 
       <span class="nvgt" id="next"></span> 
      </div> 
      </div> 

CSS:

.container{ 
    margin-left: auto; 
    margin-right: auto; 
} 
.slider_wrapper{ 
    overflow: hidden; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 85%; 
} 
#image_slider{ 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    float: left; 
    /*Chrom default padding for ul is 40px */ 
    padding:0px; 
    margin:0px; 
} 
#image_slider li{ 
    position: relative; 
    float: left; 
} 

Спасибо большое!

Answer 1

Вы должны установить body и html высотой до 100%, а затем просто отрегулировать высоту container до 100%.

Предлагаю использовать до body и htmlmin-height: 100%;.

.body, .html { 
    min-height: 100%; 
} 

.container{ 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 

А затем просто играйте с высотами.