Angular 材质 Flex - 在 fxLayout 中滚动

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

如果你一直使用 fxLayout，它会起作用：

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto" fxLayout="column">
      <h1>Title here</h1>
      <div fxFlex 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>

堆栈闪电战

我如何得到这个解决方案：

第1步：

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto" fxLayout="column">                           <!-- continue using fxLayout -->
      <h1>Title here</h1>
      <div fxFlex fxLayout="column" style="overflow-y:auto">        <!-- add corresponding fxFlex to child -->
        <div fxFlex>                                                <!-- add a div that can 'flex' -->
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
        </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </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" fxLayout="column">                           
      <h1>Title here</h1>
      <div fxFlex fxLayout="column">                                <!-- move overflow style from here... -->
        <div fxFlex style="overflow-y:auto">                        <!-- ... to here -->
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
        </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

步骤3：

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

Answer 3

解决方案：

<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>