css 为什么百分比高度对我的div不起作用？[重复]

yrefmtwq 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(119)

此问题在此处已有答案：

Why doesnt percentage height work in HTML/CSS?（7个答案）
How to make a div 100% height of the browser window（43个回答）
7年前关闭。
社区在4个月前审查了是否重新打开这个问题，并将其关闭：
原始关闭原因未解决
我有两个高度为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>

字符串

css

来源：https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div

2条答案

按热度按时间

zc0qhyus1#

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

CSS height属性，当与百分比值一起使用时，相对于元素的包含块进行计算。
假设你的body元素有height: 1000px，那么一个有height: 90%的子元素将得到900 px。
如果你没有为包含块设置一个显式的高度（并且子元素没有绝对定位），那么你的具有百分比高度的子元素将没有什么可做的，高度将由内容和其他属性决定。
从spec：

10.5内容高度：height属性
百分比

指定高度百分比。该百分比是相对于生成的框的包含块的高度计算的。如果未显式指定包含块的高度并且此元素未绝对定位，则该值计算为'auto'。

自动

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

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

这里有一个小小的总结：
John：* 我想把div的高度设置为100%。
#21040;，100%的？
John：100%的容器。因此，父容器向上一级。
Jane：好的。div的父对象的高度是多少？*
约翰：* 没有。我想是自动的。内容驱动的。*
Jane：* 所以，你希望div的高度是未知变量的100%？*
约翰：[沉默]
简：“嘿，约翰，我能拿50%吗？”
#35755;的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`

正如你所看到的，百分比高度有点棘手。你可以通过简单地使用 *viewport百分比高度 * 来避免复杂性（即，永远不必考虑父元素）。每当你想让一个盒子成为viewport的高度时，使用height: 100vh而不是height: 100%。不需要其他任何东西。

绝对定位异常

正如规范中所指出的，绝对定位的元素是百分比高度规则的例外。更多细节在这里：Applying 100% height to nested, non-flex elements。

赞(0）回复(0）举报 2024-01-09

jgwigjjp2#

使用vh（viewport height）代替百分比。它将获取浏览器的高度并相应地调整其大小，例如。

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>

型

赞(0）回复(0）举报 2024-01-09

我来回答

css 为什么百分比高度对我的div不起作用？[重复]

2条答案

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

示例

使用`100vh`

绝对定位异常

相关问题

热门标签

最新问答

css 为什么百分比高度对我的div不起作用？[重复]

2条答案

使用CSS height属性和百分比值

示例

使用100vh

绝对定位异常

相关问题

热门标签

最新问答

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

使用`100vh`