Question

我有两个高度为90％的div，但显示效果不同。

我试图在它们周围放置一个外部div，但这没有帮助。此外，它在Firefox，Chrome，Opera和＆amp; 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>

Answer 1

使用CSS `height`属性和百分比值

CSS height属性与百分比值一起使用时，是根据包含块的元素计算的。

让我们说body元素有height: 1000px。然后，height: 90%的孩子将获得900px。

如果您没有为包含块设置显式高度（并且子项未定位），那么具有百分比高度的子元素将无法继续，高度将由内容和其他属性决定。< / p>

来自规范：

10.5 Content height: the height property

百分比
指定百分比高度。百分比是根据生成的框的高度计算的   包含块。如果包含块的高度不是   明确指定并且此元素没有绝对定位，该值计算为＆＃39; auto＆＃39;。

自动
高度取决于其他属性的值。

因此，如果您想在div中使用百分比高度，请指定所有父元素的高度，包括根元素（例如html, body {height:100%;}）

请注意，min-height和max-height是不可接受的。它必须是height属性。

这里有一个小小的总结：

John：我想将div的高度设置为100％。
  简： 100％的是什么？
  约翰： 100％的容器。所以，父母一级上升。
  简：好的。那个div的父母的高度是什么？
  约翰：没有。我想是自动的。内容驱动。
  Jane：那么，你希望div具有100％未知变量的高度吗？
  约翰： [沉默]
  简：嘿约翰，我可以拿50％吗？
  约翰： 50％的是什么？
  简：完全正确！
  Jane：百分比是相对值。你总是要问＆＃34;什么的百分比？＆＃34;。通过为每个父级声明一个明确的高度，一直到body和html，您为每个具有百分比高度的孩子建立一个参考框架，使高度起作用。

实施例

我们假设您希望div的父级高度为50％。

这不会起作用：

<article>
    <section>
        <div style="height:50%"></div>
    </section>
</article>

这两者都不会：

<article>
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

这也不会：

<article style="height:100%">
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

这也会失败：

<body style="height:100%">
    <article style="height:100%">
        <section style="height:100%">
            <div style="height:50%"></div>
        </section>
    </article>
</body>

现在，它最终会起作用：

<html style="height:100%">
    <body style="height:100%">
        <article style="height:100%">
            <section style="height:100%">
                <div style="height:50%"></div>
            </section>
        </article>
    </body>
 </html>

这也可行：

<article>
    <section style="height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

但不是这样：

<article>
    <section style="min-height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

sample code

使用`100vh`

如您所见，百分比高度有点棘手。您可以通过简单地使用视口百分比高度来避免复杂性（即，永远不必考虑父元素）。只要您希望框是视口的高度，请使用height: 100vh而不是height: 100%。不需要任何其他东西。

绝对定位异常

如the spec所述，绝对定位的元素是百分比高度规则的例外。更多详情：Applying 100% height to nested, non-flex elements。

Answer 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>

为什么百分比高度不适用于我的div？

2 个答案:

使用CSS `height`属性和百分比值

实施例

使用`100vh`

绝对定位异常

为什么百分比高度不适用于我的div？

2 个答案:

使用CSS height属性和百分比值

实施例

使用100vh

绝对定位异常

使用CSS `height`属性和百分比值

使用`100vh`