Angular material flex - 在 fxLayout 内滚动

Question

我真的在为我认为是一个简单的问题而苦苦挣扎..

我有一个页眉、一个内容区域和一个页脚，我正在使用 fxLayout，最简单的是：

 <div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto">
      <h1>Title here</h1>
      <div fxLayout="column" style="overflow-y:auto">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

我不明白为什么红色容器不在页眉和页脚之间滚动。

Stackblitz here

我真的不想向父级 div 添加 height:100vh，因为这会破坏其他页面，即使我这样做仍然无法像我预期的那样工作。

真的希望有人能对此有所启发。

提前致谢！

Answer 1

设置容器的高度 div 并删除 fxLayout="column" 如下 -

<div style="overflow-y:auto; height:100px">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
</div>

更新

如果您的页眉和页脚是固定大小（在下面的示例中为 100px），那么您可以使用 calc()-

<div style="overflow-y:auto; height:calc(100vh - 100px)"> 
              <div style="height:3000px;background:red;">
                Why is doesn't this scroll?
              </div>
    </div>

您还可以为 div 设置 top 和 bottom，并将位置设置为 fixed。 div 需要一些信息（高度、顶部、底部等）才能滚动 -

<div style="overflow-y:auto; position:fixed; top:50px; bottom:50px; width:100%">
      <div style="height:3000px;background:red;">
        Why is doesn't this scroll?
      </div>
  </div>

Answer 2

解决方案：

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto">
      <h1>Title here</h1>
      <div style="overflow-y:auto; height: 300px;"> // <== look here
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

Angular material flex - 在 fxLayout 内滚动

Angular material flex - scroll within fxLayout

angular

flexbox

angular-material2

angular-material-7