给div样式='height:100％'是什么意思? [英] What does it mean to give a div a style='height:100%'?
问题描述
关于SO的问题很多，但我扫描的问题都是针对具体情况的.我想知道的是，从概念上讲，说什么意思:
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
100％有多高?100％是什么?
How high is 100%? 100% of what?
跟进问题:如果100％代表父对象的身高，但是父对象是< body>.并且除了div的高度外没有其他高度，那是什么意思?似乎是递归定义的.
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
推荐答案
父容器高度的100％.
100% of the parent container's height.
请参阅此处: http://jsfiddle.net/6VRn6/
如果要使用此方法将div设置为页面高度的100％，则必须将高度指定为正文和html的100％.
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
当您不指定 html 或 body 高度时，它们的高度就是其中元素高度的总和.
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
更新的演示 显示了此内容.我们有一个200px的div，其中2px的边框总计204px，然后是一个40px的状态div. body 的高度应为244px.现在，如果将上面的CSS添加到页面，则高度将为jsfiddle右下象限的高度.尝试添加它并再次运行代码.然后调整结果窗格的大小并再次运行以查看高度的相应变化.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
这篇关于给div样式='height:100％'是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
