为什么百分比高度不能在我的div上工作？
我有两个div的高度为90％，但显示不同。
我试图把一个外部的div，但没有帮助。 另外，在FF，Chrome，Opera和Safari上也是如此。
有人可以解释为什么我有这个问题吗？
以下是我的代码：
<div style="height: 90%"> <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;"> <tabset> <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active" disabled="tabs[0].disabled"> </tab> <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active" disabled="tabs[2].disabled"> </tab> </tabset> </div> <div id="leaflet_map" ng-controller="iPortMapJobController"> <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet> </div> </div> 使用vh （视口高度）而不是百分比。 它会得到浏览器的高度，并相应地调整它的大小，例如
height:90vh;
试试这个代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id ="wrapper"> <div id="tabs" ng-controller="TabsDataCtrl"> <tabset> <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active" disabled="tabs[0].disabled"> </tab> <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active" disabled="tabs[2].disabled"> </tab> </tabset> </div> <div id="leaflet_map" ng-controller="iPortMapJobController"> <leaflet center="center" markers="markers" layers="layers"></leaflet> </div> </div> </body> </html>
与CSS
<style> #wrapper{height:60vh;} #tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;} #leaflet-map{width:78%; height:60vh; overflow-y:scroll; overflow-x:hidden;} </style>
使用CSS height属性和百分比值
CSS height属性与百分比值一起使用时，会根据元素的包含块进行计算。
假设你的body元素有height: 1000px 。 然后一个height: 90%的孩子会得到900px。
如果你没有为包含块设置一个明确的高度（并且孩子不是绝对定位的），那么你的具有百分比高度的子元素将没有任何进展，高度将由内容和其他属性决定。
从规格：
10.5内容高度：
height属性百分比
指定百分比高度。 百分比是根据生成的包含盒子的高度来计算的。 如果包含块的高度没有明确指定，并且该元素没有被绝对定位，则该值计算为“auto”。汽车
高度取决于其他属性的值。
因此，如果你想在你的div中使用百分比高度，指定所有父元素的高度，直到包括根元素（例如， html, body {height:100%;} ）
请注意， min-height和max-height是不可接受的。 它必须是height属性。
这里有一个小小的总结：
约翰： 我想把我的div的高度设置为100％ 。
简： 100％是什么？
约翰： 100％的容器。 所以，家长一级上来。
简： 好的。 那么div的父母的身高是多less呢？
约翰： 没有。 汽车，我猜。 内容驱动。
简： 所以，你想要div有一个未知variables的100％的高度？
约翰： [沉默]
简： 嘿，约翰，我可以有50％吗？
约翰： 50％的是什么？
简： 确实！
简： 百分比是相对值。 你总是要问“什么比例？”。 通过为每个父母声明一个明确的高度，直到body和html，为每个具有百分比高度的孩子build立一个参考框架，使高度起作用。
例子
假设你想要一个div有50％的父母身高。
这不会工作：
<article> <section> <div style="height:50%"></div> </section> </article>
这也不是：
<article> <section style="height:100%"> <div style="height:50%"></div> </section> </article>
这也不是：
<article style="height:100%"> <section style="height:100%"> <div style="height:50%"></div> </section> </article>
这也会失败：
<body style="height:100%"> <article style="height:100%"> <section style="height:100%"> <div style="height:50%"></div> </section> </article> </body>
现在，它终于会工作：
<html style="height:100%"> <body style="height:100%"> <article style="height:100%"> <section style="height:100%"> <div style="height:50%"></div> </section> </article> </body> </html>
这也是可行的：
<article> <section style="height: 500px"> <div style="height:50%"></div> </section> </article>
但不是这样的：
<article> <section style="min-height: 500px"> <div style="height:50%"></div> </section> </article>
示例代码
正如在规范中指出的那样，绝对定位的元素是规则的一个例外。 更多细节在这里： 应用100％的高度嵌套，非flex元素 。
