为啥百分比高度不适用于我的 div？ [复制]

Posted

技术标签:

【中文标题】为啥百分比高度不适用于我的 div？ [复制]【英文标题】：Why is percentage height not working on my div? [duplicate]为什么百分比高度不适用于我的 div？ [复制] 【发布时间】：2015-10-22 01:28:40 【问题描述】：

我有两个高度为 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" ></leaflet>
    </div>
</div>

【问题讨论】：

【参考方案1】：

使用 CSS height 属性和百分比值

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

假设您的body 元素具有height: 1000px。那么height: 90% 的孩子将获得 900 像素。

如果您没有为包含块设置显式高度（并且子元素不是绝对定位的），那么具有百分比高度的子元素将无事可做，高度将由内容和其他属性确定。

来自规范：

10.5 Content height: the height property

百分比 指定百分比高度。百分比是根据生成框的高度计算的 包含块。如果包含块的高度不是 明确指定并且此元素不是绝对定位的，该值计算为“自动”。

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

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

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

这里有一个小总结：

John：我想将 div 的高度设置为 100%。 简：100% 什么？ 约翰：100% 的容器。所以，父级上一级。 简：好的。 div 的父级的高度是多少？ 约翰：没有。汽车，我猜。内容驱动。 简：那么，您希望 div 具有未知变量的 100% 高度吗？ 约翰：[沉默] 简：嘿，约翰，我可以要 50% 吗？ 约翰：50% 什么？ 简：没错！ 简：百分比是相对值。你总是要问“什么的百分比？”。通过为每个父级声明一个明确的高度，一直到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。

【讨论】：

@Bjango，是的，这是不正确的。 HTML 元素一般默认为height: auto（内容的高度），而不是height: 100%。另一方面，块级元素的宽度默认为width: 100%（父级的宽度）。 这里有更详细的解释：***.com/a/46546152/3597276 哈哈，在阅读了这个答案的摘要部分后，我觉得我刚刚读了一本 Head First CSS 书。干得好！ @Michael_B 唷，我真的没想到你会在几天后回答哈哈。非常感谢你的回复。好的，我将发布一个关于这个问题的正式问题，因为我已经做了一些研究并且它不是任何东西的重复（你可能已经注意到了）。在那个线程上见，我会用链接在这里联系你 非常感谢您的回答！我的问题是链中有一个min-height，我不知道它会导致孩子height: 100%s 失败【参考方案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>
    #wrapperheight:60vh;
    #tabs width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;
    #leaflet-mapwidth:78%; height:60vh; overflow-y:scroll;  overflow-x:hidden;
</style>

【讨论】：

没有任何影响 我稍微改变了css，它现在就像#wrapper height: 90vh; #tabs 宽度：20%;向左飘浮;高度：90vh；溢出-y：滚动；溢出-x：隐藏； #leaflet-map 宽度：78%;浮动：对；溢出-y：滚动；溢出-x：隐藏；

以上是关于为啥百分比高度不适用于我的 div？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

高度百分比不适用于纵向屏幕方向

以百分比表示的 Div 高度 [重复]

我可以将 div 高度编程为当前宽度的一定百分比吗？ [复制]

如何在具有百分比高度的div中间垂直对齐文本？ [复制]

我可以根据基于百分比的宽度设置 div 的高度吗？ [复制]

html高度用百分比设置为啥无效