以百分比表示的 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% 是因为“整个页面”只是你的内容有多高。将封闭的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...
【讨论】:
以上是关于以百分比表示的 Div 高度 [重复]的主要内容,如果未能解决你的问题,请参考以下文章