Question

下面是指向简单github演示的链接。

我正在尝试创建gridster应用。 Gridster将适合屏幕显示。 Gridster项将包含一些可滚动的部分（例如不可滚动的标题和可滚动的内容）。
理想情况下，我希望可滚动部分包含栅格项目的其余区域。通过设置css溢出属性，我可以设法使整个项目可滚动，但不能设置部分。

gridster配置：

gridsterOptions: GridsterConfig = {
    gridType: 'fit',
    compactType: 'compactUp',
    minCols: 1,
    maxCols: 12,
    minRows: 1,
    maxRows: 12,
    outerMarginLeft: 4,
    outerMarginRight: 4,
    outerMarginTop: 4,
    displayGrid: 'always',
    defaultItemCols: 1,
    defaultItemRows: 1,
    minItemCols: 1,
    maxItemCols: 12,
    minItemRows: 1,
    maxItemRows: 12,
    itemChangeCallback: (newPosition) => {
      console.log('grid item event: ', newPosition);
      // todo, save changed gridster layout into user's profile?
    },
    draggable: {
      enabled: true
    },
    resizable: {
      enabled: false
    },
    pushItems: true,
    pushResizeItems: false,
    swap: true
  };

AppComponent：

<gridster [options]="gridsterOptions">
  <gridster-item [item]="widget" *ngFor="let widget of dashboard">
    <p>
     some non scrollable text
    </p>
<div style="overflow: scroll;">
  <p>
    very big content here which should scroll to the end of gridster item
  </p>
</div>
  </gridster-item>
</gridster>

我的问题是如何使div的大小仅到gridster项目的末尾？

demo here

非常感谢您的帮助

Answer 1

这对我有用：

<gridster [options]="gridsterOptions">
   <gridster-item [item]="widget" *ngFor="let widget of dashboard">
      <div>
         some non scrollable text
      </div>
      <div style="overflow-y: auto; max-height: calc(100% - 40px);">
         <p>
           very big content here which should scroll to the end of gridster item
         </p>
      </div>
   </gridster-item>
</gridster>

其中40px是标题div的高度。这在chrome上可以正常使用，但在其余部分上，右侧缩放器与滚动条重叠。这很烦人，很难抓住滚动而不是调整窗口小部件的大小。编辑：增加边距解决了这个问题。

angular-gridster2使网格大小适合网格项目的可滚动内容

1 个答案: