为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

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

我有两个高度为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>


查看完整描述

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>


查看完整回答
反对 回复 2019-05-24
?
繁花不似锦

使用CSS height属性和百分比值

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

假设你的body元素有height: 1000px。然后一个孩子height: 90%将获得900px。

如果您没有为包含块设置显式高度(并且子项未定位),那么具有百分比高度的子元素将无法继续,高度将由内容和其他属性确定。

从规格:

10.5内容高度:height属性

百分比
指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位,则该值将计算为“auto”。

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

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

需要注意的是min-heightmax-height是不能接受的。它必须是height财产。

这是一个小小的总结:

约翰:我想将div的高度设置为100%
简:100%的是什么?
约翰:100%的容器。所以,父母一级上来。
简:好的。div的父母的高度是多少? 
约翰:没有。我想是自动的。内容驱动。
简:那么,你想让div具有100%未知变量的高度?
约翰:[沉默]
简:嘿约翰,我可以拿50%吗?
约翰:50%的什么?
简:没错!
简:百分比是相对值。你总是要问“什么的百分比?”。通过为每个父项声明一个明确的高度,bodyhtml为每个具有百分比高度的子项建立一个引用框架,使高度起作用。

例子

假设您希望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>

示例代码


使用 100vh

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

绝对定位例外

规范所述,绝对定位的元素是百分比高度规则的例外。更多细节:将100%高度应用于嵌套的非柔性元素


查看完整回答
反对 回复 2019-05-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信