我在页面顶部粘贴了一个标题栏（#A），在页面底部粘贴了一个页脚栏（#C）。每一个都有固定的高度30px并在这里用黄色表示。它们通过以下代码粘在那里：display:flex; align-content: space-between;.
在这 2 个 div 之间有一个红色 div，其中包含页面内容（#B），它比屏幕尺寸大。我的目标是让这个红色 div 只占用剩余的屏幕空间，保持这个高度并滚动其内容。但是当我设置overflow:scroll滚动条显示没有任何效果。
我知道还有另一种可能性来执行此布局，例如 3 行的表格，或者将条形图放置为position:absolute / position:fixed并摆脱display:flex;但在跳出这些替代方案之前，我想知道当前的情况是否可行。
body {
margin:0px;
}
#container {
max-width: 100vw;
max-height: 100vh;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: space-between;
align-content: space-between;
}
#A {
width: 100%;
height: 30px;
}
#B {
display:inline-block;
width: 100%;
overflow: scroll;
}
#C {
width: 100%;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div id=A style="background-color:gold;"></div>
<div id=B style="background-color:tomato;">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div id=C style="background-color:gold;"></div>
</div>
</body>
</html>
也许您正在尝试实现这样的目标：
html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; margin: 0; }
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#A { flex: 0 0 30px; }
#B { flex: 1 1 auto; overflow: auto; }
#C { flex: 0 0 30px; }
http://codepen.io/simoncereska/pen/xZQPXQ
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
