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

Posted 2023-03-04

【中文标题】以百分比表示的 Div 高度 [重复]

【英文标题】：Div Height in Percentage [duplicate]

【发布时间】：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. 这个问题每个月都会问几次，投票赞成

这里有更好的解释***.com/questions/1622027/…

【参考方案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...