参见英文答案 >
height: 100% not working9个答案我有两个div的高度是90％，但显示不同。
我试图放一个外部的div，但没有帮助。另外，FF，Chrome，Opera&苹果浏览器。
有人可以解释为什么我有这个问题吗？
以下是我的代码：
<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>
