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

Posted

技术标签:

【中文标题】以百分比表示的 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% 是因为“整个页面”只是你的内容有多高。将封闭的htmlbody 更改为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】:

您还需要给bodyhtml 一个高度。否则,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...

【讨论】:

以上是关于以百分比表示的 Div 高度 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

两个div底部div通过浏览器窗口调整高度[重复]

将元素高度/宽度设置为百分比和像素值的组合[重复]

宽度等于动态高度正方形[重复]

Bootstrap 行自定义高度(百分比)

css 高度值以百分比表示

从宽度设置div高度(反之亦然)[重复]