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%

Answer 2

对于那些来这里的人，想知道为什么看不到<div style="width: 50%; height: 50%; background: red;"></div>之类的红色大块，此答案适合您。

此外，不需要使用JavaScript或确定的像素值（例如100px），只需纯CSS和百分比即可。

如果您的div只是自己坐在那里，height: 50%表示身体高度的50％。通常，身体的高度为零，没有任何可见的内容，因此其中的50％恰好是零。

这是解决方案（基于this）（取消注释background行以获得填充的可视化效果）

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

上面写的是为了仍然有通常的填充。您可以将红色div的尺寸设置为100%，但仍然在每侧/每端看到填充。如果您不希望使用此填充，请使用它（尽管看起来不太好，我建议您坚持使用第一个示例）：

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

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

2 个答案: