以百分比表示的 Div 高度 [重复]答案

【问题标题】：Div Height in Percentage [duplicate]以百分比表示的 Div 高度 [重复]
【发布时间】：2013-01-10 19:34:54
【问题描述】：

可能重复：
Percentage Height HTML 5/CSS

这需要是一个简单的，但我为什么不适用以百分比为 div 指定的高度。

例如：

<div class="container">
  adsf
</div>

CSS：

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

当我将高度从 % 更改为 px 时，它工作得很好。 % 与 px 一样有效，但为什么只有 px 有效而 % 无效。 here 是 jsfiddle

编辑虽然我在原始问题中错过了 50% 后的分号，这完全破坏了它。事实上，我想问的是，为什么 50% 不能让它消耗 50% 的容器。它只从内容中获取高度，而不是从其容器中获取 50%。

【问题讨论】：

这是怪癖模式还是标准模式？高度在模式之间的工作方式不同。
@AliBassam 我认为这不是问题，因为 OP 说它适用于 px。
我知道我在更改代码时错过了分号，但事实上的问题是为什么 50% 不会使其消耗 50% 的容器。它仅从内容中获取高度，而不是从其容器中获取 50%。
1.在 50% 后缺少 ; 2. 如果要使用百分比高度，则需要指定 div jsfiddle.net/j8bsS/8 的所有父块元素的高度 3. 这个问题每个月都会问几次，投票赞成
这里有更好的解释stackoverflow.com/questions/1622027/…

标签： css html percentage jsfiddle

【解决方案1】：

不占整个页面的 50% 是因为“整个页面”只是你的内容有多高。将封闭的html 和body 更改为100% 高度即可。

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

^ 您的文档只有 20 像素高。 20px 的 50% 是 10px，这不是你所期望的。

^ 现在如果把文档的高度改成整个页面的高度（150px），150px的50%就是75px，那么就可以了。

【讨论】：

tnx @derek 所以我们在 %age 中指定 div 的高度时，我们需要设置其父容器的高度集
@ZedBee - 如果您不指定高度，那么它将仅采用容器内容的高度。所以是的，你必须指定高度。
tnx.这真的让事情变得清晰
投反对票可能是因为这不是一个正确的答案。只有当 div 元素是 body 元素的子元素时，这才是准确的。查看重复的问题。
是的，这是因为这是他特定 jsfiddle 的答案，而不是一般的答案。

【解决方案2】：

您还需要给body 和html 一个高度。否则，body 将仅与其内容一样高（单个 div），其中 50% 将是此 div 高度的一半。

更新小提琴：http://jsfiddle.net/j8bsS/5/

【讨论】：

【解决方案3】：

“50%”后缺少分号（;）

但您也应该注意到，您的 div 的百分比与包含它的 div 相关。

例如：

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

您的 .container 的高度为 50 像素。它将是包装 div 中 100px 的 50%。

如果你有：

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

那么你的 .container 将是 200px。 50% 的包装。

所以您可能想查看“包装”您的“.container”的 div...

【讨论】：