html - 无法将 div 高度更改为百分比

Question

我正在尝试制作响应式 div，但出于某种原因，将高度更改为百分比只会忽略高度。我只能添加固定高度。

下面例子中我要改变的div是mainContainer

html, body{
    width:100%;
    height: 100%;
}
.mainContainer{
    width:150%;
    height:550px; /*I want this to be 60% or something*/
    padding:10px;
    background-color:#080808;
    border-radius:5px;
}
.textContainer{ 
    width:55%;
    height:100%;
    float: left;
    background-color:#666666;
    border-radius:10px 0 0 10px;  /*TL TR BR BL*/
}
#map1 {
    width: 45%;
    height: 100%;
    margin-top:-15px;
    float:right;
    display:inline;
    border-radius:0 15px 15px 0;  /*TL TR BR BL*/
}
.contentBox{
    width:96%;
    height:100%;
    color:#F2F2F2;
    font-size:100%;
    padding-right:3%;
    padding-left:3%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


<section class="mainContainer">
        <div class="textContainer">
            <div class="intro"> 
                <div class="contentBox">
                             </div>
                      </div>
            </div>
           <div id="map1"></div>
</section>

Answer 1

您尝试赋予高度的元素的父 div 需要设置高度，以便您为子元素赋予高度 %。

.wrapper { width: 200px; height: 200px; background-color: black; }
.content { width: 100%; height: 60%; background-color: red; }
<div class="wrapper">
    <div class="content"></div>
</div>

http://jsfiddle.net/fy8Kx/

在您的示例中，只需确保 .mainContainer 的父级设置了高度，然后您就可以将高度设置为 60%