角度材质 flex - 在 fxLayout 内滚动答案

【问题标题】：Angular material flex - scroll within fxLayout角度材质 flex - 在 fxLayout 内滚动
【发布时间】：2020-06-21 02:56:49
【问题描述】：

我真的在努力解决我认为是一个简单的问题..

我有一个页眉、一个内容区域和一个页脚，我正在使用 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

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

真的希望有人能对此有所了解。

提前谢谢你！

【问题讨论】：

标签： angular flexbox angular-material2 angular-material-7

【解决方案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>

【讨论】：

但我不想设置明确的高度（在您的示例中为 100px） - 它需要占用剩余空间（并滚动）。
我在上面和stackblitz上的版本是一个简化版本，但实际上有几个div很深，这并不像添加一个top：50px那么简单，因为我不确定高度可滚动区域之外的内容。我真正追求的是我的 stackblitz 不起作用的原因 - 有什么想法吗？
您在问题中没有提到这些。请保持您的问题准确。在答案中添加更多问题会误导其他用户阅读您的问题。
如果不让div 知道它应该滚动的范围，就不可能使div 可滚动。

【解决方案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>

【讨论】：