为什么百分比高度不适用于我的div？我有两个高度为90％的div，但显示效果不同。我试图在它们周围放置一个外部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>
2 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
使用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>- 2 回答
- 0 关注
- 804 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消