Html 为什么百分比高度不适用于我的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31728022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is percentage height not working on my div?
提问by victor
I have two divs with a height of 90%, but the display is different.
我有两个高度为 90% 的 div，但显示不同。
I have tried to put an outer div around them, but that has not helped. Also, it's the same on Firefox, Chrome, Opera, & Safari.
我试图在它们周围放置一个外部 div，但这并没有帮助。此外，在 Firefox、Chrome、Opera 和 Safari 上也是如此。
Can someone explain why I am having this problem?
有人可以解释为什么我遇到这个问题吗？
Below is my code:
下面是我的代码：
<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>
采纳答案by Rachel Gallen
Use vh(viewport height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.
使用vh（视口高度）而不是百分比。它将获取浏览器的高度并相应地调整其大小，例如
height:90vh;
try this code
试试这个代码
<!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>
with css
用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>
回答by Michael Benjamin
Working with the CSS heightproperty and percentage values
使用 CSSheight属性和百分比值
The CSS heightproperty, when used with a percentage value, is calculated with respect to the element's containing block.
CSSheight属性与百分比值一起使用时，是根据元素的包含块计算的。
Let's say your bodyelement has height: 1000px. Then a child with height: 90%would get 900px.
假设您的body元素具有height: 1000px. 然后一个孩子height: 90%会得到 900px。
If you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have nothing to go on and height will be determined by content and other properties.
如果您没有为包含块设置明确的高度（并且子元素不是绝对定位的），那么您的具有百分比高度的子元素将没有任何内容，高度将由内容和其他属性确定。
From the spec:
从规范：
10.5 Content height: the
heightpropertypercentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.auto
The height depends on the values of other properties.
百分比
指定百分比高度。该百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度并且此元素不是绝对定位的，则该值计算为 'auto'。auto
高度取决于其他属性的值。
Hence, if you want to use percentage heights in your divs, specify the height of all parent elements, up to and including the root element (e.g., html, body {height:100%;})
因此，如果您想在 div 中使用百分比高度，请指定所有父元素的高度，直到并包括根元素（例如，html, body {height:100%;}）
Note that min-heightand max-heightare not acceptable. It must be the heightproperty.
请注意，min-height和max-height是不可接受的。必须是height财产。
Here's a little summary:
这里有一个小总结：
John: I want to set the height of my div to 100%.
Jane: 100% of what?
John: 100% of its container. So, the parent one-level up.
Jane: Okay. And what's the height of the div's parent?
John: Doesn't have one. Auto, I guess. Content-driven.
Jane: So, you want the div to have a 100% height of an unknown variable?
John: [silence]
Jane: Hey John, can I have 50% of that?
John: 50% of what?
Jane: Exactly!
Jane: Percentages are relative values. You always have to ask "percentage of what?". By declaring an explicit height for each parent all the way up tobodyandhtmlyou establish a frame of reference for each child with percentage height, enabling the height to work.
约翰：我想将 div 的高度设置为 100%。
简：100%什么？
约翰：100% 的容器。因此，父级向上一级。
简：好的。div 的父级的高度是多少？
约翰：没有。汽车，我猜。内容驱动。
Jane：那么，您希望 div 具有 100% 高度的未知变量吗？
约翰：[沉默]
简：嘿，约翰，我可以拿 50% 吗？
约翰：什么的 50%？
简：没错！
简：百分比是相对值。你总是要问“什么的百分比？”。通过为每个父级一直声明明确的高度，body并html为每个子级建立一个具有百分比高度的参考框架，使高度能够起作用。
Examples
例子
Let's say you want a div to have 50% height of its parent.
假设您希望 div 具有其父级的 50% 高度。
This won't work:
这行不通：
<article>
<section>
<div style="height:50%"></div>
</section>
</article>
Neither will this:
这也不会：
<article>
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
And neither will this:
这也不会：
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
This will fail, too:
这也会失败：
<body style="height:100%">
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
</body>
NOW, it will finally work:
现在，它终于可以工作了：
<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>
And this would work, as well:
这也行得通：
<article>
<section style="height: 500px">
<div style="height:50%"></div>
</section>
</article>
But not this:
但不是这个：
<article>
<section style="min-height: 500px">
<div style="height:50%"></div>
</section>
</article>
Use 100vh
用 100vh
As you can see, percentage heights are a bit tricky. You can avoid the complexity (i.e., never have to consider parent elements) by simply using viewport percentage heights. Whenever you want a box to be the height of the viewport, use height: 100vhinstead of height: 100%. Nothing else is needed.
如您所见，百分比高度有点棘手。您可以通过简单地使用视口百分比高度来避免复杂性（即，永远不必考虑父元素）。每当您希望框作为视口的高度时，请使用height: 100vh代替height: 100%。不需要其他任何东西。
Absolute Positioning Exception
绝对定位异常
As noted in the spec, an absolutely positioned element is an exception to the rule for percentage heights. More details here: Applying 100% height to nested, non-flex elements.
正如规范中所指出的，绝对定位的元素是百分比高度规则的一个例外。更多详细信息：将 100% 高度应用于嵌套的非 flex 元素。
