1

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

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

格子配置：

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

应用组件：

<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 项目的末尾？

演示在这里

非常感谢您的帮助

4

1 回答 1

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 上运行良好，但在其余部分，右侧调整大小与滚动条重叠。抓住滚动而不是调整小部件的大小非常烦人且非常困难。编辑：添加边距解决了这个问题。

于 2019-09-09T15:00:44.760 回答