为什么百分比高度不工作在我的div？ [英] Why is percentage height not working on my div?
本文介绍了为什么百分比高度不工作在我的div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个div的高度为90％，但显示是不同的。
我试图放一个外部div但是没有帮助。此外，它是相同的FF，Chrome，歌剧&
以下是我的代码：
< div style =height：90％>
< div ng-controller =TabsDataCtrlstyle =width：20％; float：left;>
< tabset>
< tab id =tab1heading ={{tabs [0] .title}}ng-click =getContent（0）active =tabs [0] .active
disabled =tabs [0] .disabled>
< / tab>
< tab id =tab2heading ={{tabs [2] .title}}ng-click =getContent（2）active =tabs [2 ] .active
disabled =tabs [2] .disabled>
< / tab>
< / tabset>
< / div>
< div id =leaflet_mapng-controller =iPortMapJobController>
< leaflet center =centermarkers =markerslayers =layerswidth =78％>< / leaflet>
< / div>
< / div>
解决方案
使用vh（vertical height）它将获得浏览器的高度和相应的大小，例如
height：90vh;
请尝试此代码
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> JS Bin< / title>
< / head>
< body>
< div id =wrapper>
< div id =tabsng-controller =TabsDataCtrl>
< tabset>
< tab id =tab1heading ={{tabs [0] .title}}ng-click =getContent（0）active =tabs [0] .active
disabled =tabs [0] .disabled>
< / tab>
< tab id =tab2heading ={{tabs [2] .title}}ng-click =getContent（2）active =tabs [2 ] .active
disabled =tabs [2] .disabled>
< / tab>
< / tabset>
< / div>
< div id =leaflet_mapng-controller =iPortMapJobController>
< leaflet center =centermarkers =markerslayers =layers>< / leaflet>
< / div>
< / div>
< / body>
< / html>
与css
< style>
#wrapper {height：60vh;}
#tabs {width：20％float：left;高度：60vh; overflow-y：scroll; overflow-x：hidden;}
＃leaflet-map {width：78％;高度：60vh; overflow-y：scroll; overflow-x：hidden;}
< / style>
I have two div's with a height of 90% but the display is different.
I have tried to put an outer div but that has not helped. Also, it's the same on FF, Chrome, Opera & Safari.
Can someone explain why I am having this problem?
Below is my code:
<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>
解决方案
Use vh (vertical height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.
height:90vh;
try this code
<!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>
with 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>
这篇关于为什么百分比高度不工作在我的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
