百分比高度的div元素

Question

可能是重复问题：
HTML 5 / CSS 中的百分比高度

这应该是一个简单的问题，但为什么设置 div 的高度百分比时不起作用。

例如：

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

CSS：

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

当我将高度从百分比改为像素(px)时，它能够完美地工作。然而百分比和像素(px)一样有效，但为什么只有像素(px)有效而百分比无效？这里是 jsfiddle：http://jsfiddle.net/ZedBee/j8bsS/2/ 编辑 虽然我在原问题中错过了50%后面的分号，完全毁了问题。实际上，我想问的是为什么50%不能让其占用容器的50%。它只使用内容的高度而不是容器的50%。

- ZedBee

---

这是使用怪异模式还是标准模式？在不同的模式下，高度表现不同。 - Mr Lister

@AliBassam 我猜这不是问题，因为OP说px参数可以正常工作。 - Mr Lister

我知道在修改代码时错过了分号，但实际上问题是为什么50%不能使其占用容器的50％。它只从其内容中获取高度，而不是容器的50％。 - ZedBee

1. 50%后缺少;
2. 如果您想使用百分比高度，需要指定div的所有父块元素的高度 http://jsfiddle.net/j8bsS/8/
3. 这个问题每个月都会被问几次，投票关闭。

- Peter

在这里有更好的解释：https://dev59.com/jnI-5IYBdhLWcg3w487k - Peter

Answer 1

之所以不占用整个页面的50％是因为"整个页面"只与你内容的高度有关。将包含的html和body更改为100％高度即可解决。

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

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

您的文档只有20像素高。 20像素的50％为10像素，这不是您期望的结果。

现在如果将文档的高度更改为整个页面的高度（150像素），那么150像素的50％为75像素，然后它就可以运行了。

- Derek 朕會功夫

---

@ZedBee - 如果您不指定高度，则它将仅采用容器内容的高度。因此，是的，您必须指定高度。 - Derek 朕會功夫

被下投票了，可能因为这不是正确的答案。只有在div元素是body元素的子元素时才正确。请参见重复的问题。 - Jonas Äppelgran

@JonasÄppelgran - 不同意，因为按照标准，div 应该总是在 body 中。 - Derek 朕會功夫

我是说这只有在 div 元素是 body 元素的直接子级时才准确。 - Jonas Äppelgran

是的，这是他特定的jsfiddle的答案，而不是通用答案。 - Derek 朕會功夫

Answer 2

你需要给 body 和 html 也设置高度。否则，body 的高度只有它的内容高度（即单个 div），而该 div 的一半高度就是这个元素的一半高度。

更新的示例： http://jsfiddle.net/j8bsS/5/

- Mr Lister

Answer 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中100像素的50%。

如果你有：

adsf

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

那么你的 .container 将会是 200 像素，也就是 wrapper 的 50%。

所以你可能需要查看包装你的 .container 的 div 元素...

- Boguz Didgeridoo