有关 CSS 中百分比的问题
 |
zachary.guo
2009-01-09
假设有如下 html 片段:
<body style="width: 100%; height: 100%"> <div id="top" style="width: 100%; height: 100px; background-color: blue;"></div> <div id="left" style="width: 120px; height: 100%; background-color: green;"></div> <div id="right"></div> </body> 按照上面所述，id 为 "top" 的 div 的宽度为 100%，那个层的确在横向上撑满了蓝色，可是 id 为 left 的层的高度为 100%，但这个层似乎并没有按我想象的那样在纵向撑满绿色。请问 CSS 中的百分比的概念到底是相对于谁而言的？ 谢谢！ |
 |
wintershan
2009-01-09
这个问题好解决,只需要在css中加入"html { height:100%; }",这样就可以了,你试试?
纵向百分比如果不给html指定height:100%,那么div里设高度百分比是不起作用的。 |
|
zachary.guo
2009-01-09
wintershan 所述，并没有达到我预期的效果。事实上，该问题的本质在于百分比的参考对象不清楚是谁。
呵呵，还是谢谢你啊！ |
|
zachary.guo
2009-01-09
哦，搞错了，是可以实现那种效果的。多谢。
顺便问下，在某个元素上应用百分比，那个这个百分比是相对于哪个元素呢，是它的父亲元素吧 谢谢！ |
 |
PrincessD
2009-10-20
wintershan 写道 这个问题好解决,只需要在css中加入"html { height:100%; }",这样就可以了,你试试?
纵向百分比如果不给html指定height:100%,那么div里设高度百分比是不起作用的。 我加了 没有用... 
|
 |
areha001
2009-10-22
我在IE6和FF下测试都有效果啊
而且id=left的竖条超过了屏幕的底线，有个上下滚动条。 超过部分的高度约等于id=top横条的高度 FF还多一点可视区到内容的margin 猜测100%是相对于浏览器的可视区域而言的 |
 |
hyj1254
2009-10-30
wintershan 写道 这个问题好解决,只需要在css中加入"html { height:100%; }",这样就可以了,你试试?
纵向百分比如果不给html指定height:100%,那么div里设高度百分比是不起作用的。 我试了下，发现一点，光有它还没用，必须得再添上这句
body {
height:100%;
}
我的理解： 浏览器默认width：100%指的就是网页在不出现横向滚动条情况下的宽度；而对height：100%，没有作默认约定。 浏览器的最大宽度一般是固定的，横向排版的网页即使有也很稀少；而绝大部分的网页都是竖排的，高度不固定，有的网页上下距离很大，有的就是一屏，100%的通常意义是最大高度，放在这里就不合适，到底多高才是最大高度呢？ %是相对"离自身最近的已设置了高度的父类"来说的。 <div style="width:100%;height:300px;"> <div style="width:50%;height:50%;"></div> </div> 由于父类的高度指定为300px，这里不设置html { height:100%; }，子div的高度也是150px。 |
