我有两个高度为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>
如何使 3 个独立的 div 拉伸到屏幕的高度而不发生溢出？
我正在使用 bootstrap 和 flexbox，但每当我将行的高度设置为 100% 时，就会出现溢出。
我希望“内容”（黄色区域）填充页面的大部分，而页眉（浅绿色区域）和页脚（粉色区域）仅占用 100 像素。
我尝试过使用 Flex-Grow 和 Stretch，但没有效果。
预先感谢您提供任何有用的意见。
https://jsfiddle.net/7xtybdrm/1/
CSS：
body {padding-top: 51px;}
html, body {
background-color: rgb(48, 48, 48);
height: 100%;
}
.body-container {
height: 100%;
display: flex;
flex-direction: column;
}
.ribbon-container {
background-color:aqua;
height: 100px;
flex: 1;
}
.content-container {
background-color: yellow;
display: flex;
flex: 2;
}
.footer-container {
height: 50px;
background-color: pink;
display: flex;
flex: 1;
}
HTML：
<head runat="server">
<title></title>
</head>
<body>
<nav class="navbar navbar-inverse …