Question

我在过去的几个小时里一直试图解决这个问题，但却无法实现这一目标。我正在尝试创建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>

感谢。任何帮助将不胜感激。

Answer 1

一种解决方案是将列内容包装在列中的另一个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将扩展以适应其中的任何内容。这种方法的缺点是，如果一列比另一列短，则较短的列不会跨越剩余的高度。

是否可以使用角度材料来固定sidenav＆＃34;和左侧滚动？

1 个答案: