为什么百分比高度不适用于我的div？
为什么百分比高度不适用于我的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>
泛舟湖上清波郎朗浏览 811回答 2
2回答
-
蛊毒传说
使用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>
随时随地看视频慕课网APP
JQuery
Html/CSS