无法将div高度更改为百分比 [英] Can't change div height to percent

问题描述

我正在尝试创建一个响应式div，但是由于某些原因，将高度更改为百分比只会忽略高度.我只能添加一个固定高度.

I am trying to make a responsive div, but for some reason, changing the height to percent just ignores the height. I can only add a fix height.

在下面的示例中我要更改的div是mainContainer

The div I want to change in the example below is the 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>

推荐答案

您要为其赋予高度的元素的父div必须具有设置的高度，以便您为子元素赋予高度％

Your parent div to the element you are trying to give a height to needs to have as set height in order for the you to give the child element a height %.

.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%

In your example just make sure the parent of .mainContainer has a height set to it and then you can make the height 60%

这篇关于无法将div高度更改为百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！