为什么百分比高度不适用于我的 div? [英] Why is percentage height not working on my div?

问题描述

我有两个高度为 90% 的 div，但显示不同.

我试图在它们周围放置一个外部 div，但这并没有帮助.此外，它在 Firefox、Chrome、Opera 和 & 上也是一样的.Safari.

谁能解释我为什么会遇到这个问题?

下面是我的代码:

<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;"><标签集><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 id="leaflet_map" ng-controller="iPortMapJobController"><leaflet center="center"markers="markers" layer="layers" width="78%"></leaflet>

解决方案

使用 vh(视口高度)而不是百分比.它将获取浏览器的高度并相应地调整其大小，例如

height:90vh;

试试这个代码

<头><meta charset="utf-8"><title>JS Bin</title><身体><div id ="包装器"><div id="tabs" ng-controller="TabsDataCtrl"><标签集><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 id="leaflet_map" ng-controller="iPortMapJobController"><leaflet center="center"markers="markers" layer="layers"></leaflet>