在过去的几个小时里，我一直在努力解决这个问题，但就是无法正常工作。我正在尝试创建 3 列，我们称它们为 A、B、C 列。
A 列和 B 列我想作为一个单元一起滚动并占据网站的整个高度。 C 列我想独立滚动，而不是在滚动 A 列和 B 列时滚动。
不幸的是，我无法创建满足所有这些条件并保持全高的设置。
在下面的这个 plnkr 中，您可以看到绿色和灰色部分应该是全高但不是。我觉得它很接近，但最后一点让我发疯!
http://plnkr.co/edit/jPpZhFLP3e1fgNvDLFQD?p=preview
<body layout="row" style="min-height:100%" >
<md-content flex layout="row" layout-fill>
<div class="side-a" flex layout-fill>
<p>lots of content that requires scrolling...</p>
</div>
<div class="middle" flex layout-fill>
<p>lots of content that requires scrolling...</p>
</div>
</md-content>
<md-sidenav layout-fill flex layout="column" class="md-sidenav-left md-whiteframe-z2 side-b" md-component-id="left>
<p>lots of content that requires scrolling...</p>
</md-sidenav>
</body>
谢谢。任何帮助将不胜感激。
最佳答案
一种解决方案是将您的列内容包装在列内的另一个 div 中，并使用相对/绝对定位。即
<md-content flex layout="row" layout-fill>
<div flex layout-fill style="position: relative;">
<div class="side-a" style="position: absolute; width: 100%;">
<p>lots of content that requires scrolling...</p>
</div>
</div>
<div flex layout-fill style="position: relative;">
<div class="middle" style="position: absolute; width: 100%;">
<p>lots of content that requires scrolling...</p>
</div>
</div>
</md-content>
请注意，类已从列本身移动到内部 div。
这是可行的，因为绝对定位的 div 将展开以适应其中的任何内容。这种方法的缺点是，如果一列比另一列短，则较短的列不会跨越剩余的高度。
关于css - 是否有可能有一个 "fixed sidenav"和一个使用 Angular Material 的滚动左侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29927973/