我目前正在尝试制作一个干净的消息传递系统，但我的界面有问题。请注意，我正在使用Materialize制作它，但是我可以使用自定义CSS对其进行调整。我在左侧有一个消息列表，右侧的剩余空间显示所选消息。这两个项目是并排的。相当经典。
但是当列表中的消息太多时，或者当文本太长而无法容纳视图高度时，我会遇到问题，我无法滚动。
我需要页面不可滚动，但我还需要能够滚动列表和消息视图。
为此，我尝试做这样的事情：
.message-view {
height: 40vh;
overflow-y: scroll;
}
它有效，但这不是我想要的。我希望.message-viewdiv 占据整个剩余高度。我可以根据以前的元素高度进行棘手的计算，但我发现这很烦人，而且我不确定我是否可以以这种方式在每个设备上获得准确的高度。
TLDR：我想要一个div，它将动态获取剩余高度，以便使用CSS或Materialize滚动。知道吗？
这是我问题的一个例子(在左侧，列表是可滚动的，但高度是垃圾， 任意设置为 80vh，因为它大约是高度(，并且消息视图不可滚动(：
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.message-list-scroller {
width: 30%;
height: 80vh;
overflow-y: scroll;
}
.message-list {
width: 98%;
height: 100%;
border: 1px solid gray;
}
.message-list-item {
width: 100%;
border-bottom: 1px solid gray;
}
.message-view {
width: 70%;
height: 100%;
padding: 10px;
}<html>
<body>
<h1>Message page</h1>
<div class="content">
<div class="message-list-scroller">
<div class="message-list">
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
</div>
</div>
<div class="message-view">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a metus vitae risus eleifend vulputate. Etiam porttitor turpis nec massa porta interdum. Maecenas euismod, quam euismod interdum venenatis, metus ex placerat mi, vitae mattis elit tellus id libero. Mauris molestie ac mauris sit amet vulputate. Aenean et dui in turpis facilisis faucibus vitae quis neque. Fusce faucibus scelerisque nunc. In efficitur odio nulla, eu mollis ligula pulvinar non. Phasellus imperdiet nunc velit, eget posuere dui tempus vel. Nullam semper, metus id luctus sollicitudin, nibh tellus volutpat urna, et aliquam tortor velit a arcu. Maecenas mauris dolor, vehicula non tellus eu, luctus molestie libero. Aenean vestibulum et ipsum in ultrices. Pellentesque nec vulputate nisi.
Pellentesque luctus justo erat, pulvinar placerat sapien malesuada sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada dui in quam sagittis varius. Aenean commodo dictum erat sed tincidunt. Nunc hendrerit dapibus neque vitae dictum. Aenean lacinia dolor nec ante imperdiet condimentum. Vestibulum bibendum cursus nibh, elementum tempor magna congue nec. In sed justo vel nulla rhoncus ultrices. Ut porta congue sem semper rutrum. Aenean dapibus massa metus, eu pellentesque nibh congue eu. Morbi efficitur sit amet massa a tincidunt. Praesent maximus quam sit amet nulla mattis, a sagittis velit efficitur.
Aliquam sed lectus accumsan, feugiat nisl nec, vestibulum orci. Maecenas aliquet at dui sed consectetur. Sed ornare et ligula a posuere. Integer elementum quis libero non rutrum. Vestibulum maximus eros in enim ullamcorper, sed maximus libero consectetur. Fusce ut nulla ultrices, malesuada risus eu, fermentum est. Praesent lectus quam, cursus vel lacus vitae, luctus malesuada mauris.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lacinia fringilla risus, sit amet gravida urna maximus gravida. Etiam tincidunt auctor fermentum. In non vehicula urna. Mauris turpis diam, facilisis vitae congue at, malesuada ac augue. Praesent augue nibh, ullamcorper id ultrices commodo, ornare in nisi. Pellentesque nunc mauris, fringilla eget accumsan sed, congue nec diam. Curabitur viverra erat ipsum, ut cursus dui fermentum vel. Nam luctus tellus non elit tristique vehicula. Sed mattis eu justo a varius. Integer metus lacus, mattis quis elit id, euismod tincidunt est. Mauris porttitor eros nec risus facilisis posuere. Sed pharetra, felis in commodo tincidunt, nisi purus lobortis elit, rutrum varius nisi mauris ac arcu. Mauris nec odio sed mauris condimentum ultrices sit amet quis purus. Mauris dictum metus sit amet ante gravida aliquet eu sit amet mi.
Aliquam erat volutpat. Nullam at arcu sit amet nunc feugiat fermentum. Duis id mi dui. Cras molestie nec quam sit amet convallis. Sed et mauris augue. Curabitur sodales ipsum lacinia convallis vestibulum. Nullam commodo urna eget nibh consequat auctor.
Nulla facilisi. Quisque ultrices rutrum erat, nec pretium nulla. Aliquam vulputate molestie scelerisque. Suspendisse eu interdum erat, quis dapibus neque. Donec ac pellentesque libero. Nulla erat odio, mattis non dolor ac, pellentesque sollicitudin nunc. Nulla ultrices ac ligula a feugiat. Morbi euismod mauris dolor, eu finibus orci condimentum et. Integer ac dui vel mauris ultrices mattis sit amet a magna. Mauris urna neque, faucibus non erat a, mattis molestie odio. Cras in elit tellus. Donec cursus ultricies sollicitudin. Nullam sed mi tincidunt, dignissim dolor at, suscipit tortor. Donec tortor neque, auctor a tincidunt eget, consequat sit amet eros. Nulla interdum, justo in blandit rutrum, urna nisl molestie urna, in lacinia nisi massa in odio. Pellentesque sodales massa nec pulvinar mattis.
Fusce a consectetur mi, nec egestas nibh. Etiam purus nisi, scelerisque sit amet tempus vitae, blandit at risus. Fusce posuere imperdiet viverra. Quisque vel suscipit turpis. Fusce dapibus non sem eget mollis. Morbi tincidunt lorem a mattis pretium. Duis nunc eros, malesuada id mi non, euismod bibendum tortor. Nulla augue lectus, porttitor ac lectus a, placerat congue sem. Vestibulum blandit lectus at urna vestibulum sodales. Curabitur malesuada tempor justo id varius. Pellentesque posuere sed erat ac iaculis.
Sed ac imperdiet mi, sit amet sodales sapien. Morbi enim neque, aliquet eget venenatis vitae, tincidunt vitae lectus. Cras pellentesque condimentum eros vel euismod. Nunc posuere magna augue, sit amet pulvinar orci auctor vitae. In hac habitasse platea dictumst. Pellentesque id auctor enim, nec sollicitudin lectus. In in pharetra odio, nec blandit diam. Integer vulputate lectus id lectus ultricies pellentesque. Donec a ornare leo, vel egestas lacus. Sed in libero laoreet, posuere sapien ac, ornare felis. Curabitur vel facilisis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum purus sem, bibendum id urna sit amet, iaculis vehicula elit. Cras porttitor urna in diam accumsan eleifend.
Vestibulum magna lectus, venenatis sed venenatis dictum, hendrerit eu arcu. Praesent sed orci id sapien scelerisque ultrices vitae non ante. Donec dignissim magna et rhoncus suscipit. Donec ut hendrerit risus, eget luctus mi. Maecenas vulputate aliquet efficitur. Donec consectetur fermentum magna, a viverra sapien semper ac. Curabitur in lacus eu sapien porta placerat non quis metus. Aenean viverra velit id erat iaculis fringilla. Duis ultrices sollicitudin venenatis. Aliquam id cursus diam.
Curabitur neque lacus, lobortis non massa sed, facilisis luctus ipsum. Nullam eget semper turpis. Sed a lorem vel arcu tempor bibendum. Praesent sem tellus, placerat sit amet est vel, ultrices porttitor sem. Cras egestas pharetra metus, nec aliquam diam consequat vitae. Ut nec ullamcorper tortor. Vestibulum dignissim nisi sit amet interdum rutrum. Integer aliquet lectus id lacus vehicula, sit amet blandit arcu fringilla. Etiam mattis bibendum tristique. Aenean sit amet ultricies odio, eu gravida ante. In vel leo id lacus volutpat accumsan vitae non nulla. Quisque eu rhoncus magna, nec molestie nibh. Nam viverra posuere est ut egestas. Nunc mauris nibh, vulputate sed viverra tincidunt, faucibus condimentum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque diam velit, suscipit ac nisi sit amet, convallis egestas metus.
</p>
</div>
</div>
</body>
</html>很抱歉这里的粗鲁例子 - 但是：
1(创建一个页面容器，设置为100vh和overflow:hidden。
2(使用网格系统制作两列。将这些也设置为height:100vh。
3(在这些山坳内，放置一个max-height为100vh的.scrollablediv。
<div class="messages">
<div class="row">
<div class="col m4">
<ul class="scrollable">...</ul>
</div>
<div class="col m8">
<div class="scrollable">...</div>
</div>
</div>
</div>
.messages {
height:100vh;
background-color: silver;
overflow: hidden;
}
.col.m4 {
background-color: white;
}
.col.m8, col.m4 {
height:100vh;
}
.scrollable {
max-height:100vh;
overflow:hidden;
overflow-y:scroll;
padding-bottom:20px;
}
代码笔。