我有两个高度为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>
Mic*_*l_B 104
height属性和百分比值CSS height属性与百分比值一起使用时,将根据元素的包含块计算.
假设你的body元素有height: 1000px.然后一个孩子height: 90%将获得900px.
如果您没有为包含块设置显式高度(并且子项未定位),那么具有百分比高度的子元素将无法继续,高度将由内容和其他属性确定.
从规格:
百分比
指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度且此元素未绝对定位,则该值将计算为"auto".auto
高度取决于其他属性的值.
因此,如果要在div中使用百分比高度,请指定所有父元素的高度,包括根元素(例如,html, body {height:100%;})
需要注意的是min-height和max-height是不能接受的.它必须是height财产.
这是一个小小的总结:
约翰:我想将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>
100vh如您所见,百分比高度有点棘手.您可以通过简单地使用视口百分比高度来避免复杂性(即,永远不必考虑父元素).只要您希望框是视口的高度,请使用height: 100vh而不是height: 100%.不需要任何其他东西.
如规范中所述,绝对定位的元素是百分比高度规则的例外.更多细节:将100%高度应用于嵌套的非柔性元素.
Rac*_*len 25
使用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>
| 归档时间： |
|
| 查看次数： |
50204 次 |
| 最近记录： |