我有两个div,高度为90%,但显示方式有所不同。
我试图在它们周围放一个外部div,但这没有帮助。另外,在Firefox,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(视口高度)代替百分比。它将获取浏览器的高度并相应地调整其大小,例如
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>