设置响应式设计的高度

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和html min-height: 100%;。

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

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

然后再玩高峰。