【发布时间】：2018-12-03 22:16:19
【问题描述】：
我想创建一个可滚动的内容 div (#left)，同时保留所有其他元素 (#header, #right)。如果我给 #left 一个固定的高度，它会按预期运行，但我希望它填满整个视口并且事先不知道任何高度。
html, body{
height:100%;
margin:0;
padding:0;
}
#main {
display: flex;
height: 100%;
flex-direction: column;
}
#header {
background-color: blue;
}
#content {
flex: 1;
background-color: red;
}
#inner {
display: flex;
height: 100%;
background-color: yellow;
}
#left {
flex: 1;
height: 100%;
overflow: auto;
background-color: pink;
}
#right {
flex: 1;
height: 100%;
background-color: green;
}<div id="main">
<div id="header">
Heyheyhey<br/>
Yo<br/>
</div>
<div id="content">
<div id="inner">
<div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>谢谢！
【问题讨论】：
-
height: 100vh应该覆盖整个视口。演示 - jsfiddle.net/ce5wn1qm/4 -
感谢您的评论！不幸的是，由于标题添加了溢出，请尝试滚动右侧面板
-
你也可以使用
height:calc(100vh - #header) -
我不知道前面的标题高度，因为一些媒体查询，它取决于标题的内容。
-
在不知道标题高度的情况下，我相信您将需要 JS。 Flexbox 做不到。