Html Can'；t将div高度更改为%

我试图做出一个反应灵敏的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>

html，正文{
宽度：100%；
身高：100%；
}
.主集装箱{
宽度：150%；
高度：550px；/*我希望这是60%左右*/
填充：10px；
背景色：#080808；
边界半径：5px；
}
.textContainer{
宽度：55%；
身高：100%；
浮动：左；
背景色：#666666；
边界半径：10px 0 0 10px；/*TL TR BR BL*/
}
#map1{
宽度：45%；
身高：100%；
利润上限：-15px；
浮动：对；
显示：内联；
边界半径：0 15px 15px 0；/*TL TR BR BL*/
}
.contentBox{
宽度：96%；
身高：100%；
颜色：#F2F2；
字体大小：100%；
右：3%；
左：3%；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}

要给子元素一个高度%，您需要将父元素的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>

.wrapper{宽度：200px；高度：200px；背景色：黑色；}
.内容{宽度：100%；高度：60%；背景色：红色；}

---

在您的示例中，只需确保

.maincainer

的父容器设置了高度，然后您就可以将高度

设置为60%

对于那些来到这里的人来说，他们想知道为什么他们看不到像

这样的东西的大红色块，这个答案适合您。

此外，不需要JavaScript或明确的像素值（如

100px

），只需要纯CSS和百分比。

如果你的div只是独自坐在那里，

身高：50%

将意味着身体高度的50%。正常情况下，身体的高度是零，没有任何可见的内容，所以其中的50%是零

这是解决方案（基于）（取消注释

背景

行以获得填充的可视化）：

/*使其占据整个页面，而无需内容将其拉伸到该高度*/
html
{
身高：100%；
/*背景：绿色*/
}
身体
{
/*
100%的高度减去距的填充物的总额外高度的1倍。
这样可以防止出现不必要的垂直滚动条。
*/
高度：计算（100%-1米）；
/*背景：蓝色*/
}
/*在大多数情况下，最好使用样式表而不是内联CSS*/
div
{
宽度：50%；
身高：50%；
背景：红色；
}

---

为了获得基于百分比的高度，所有父块级元素都需要明确声明的高度。请贴上标记。另外，您是否期望文档（html/正文元素）比视口/窗口高？谢谢，这就是解决方案！