ag-grid 高度=100% 折叠答案

【问题标题】：ag-grid Height=100% collapsedag-grid 高度=100% 折叠
【发布时间】：2017-07-13 01:30:01
【问题描述】：

本地运行Basic AngularJS 1.x Example，发现style="height: 100%;" 网格是否塌陷成水平线。将其设置为其他类似 100px 的作品。除了我的 Angular 是 1.5.0 和 ag-grid v8.1.0 之外，一切都一样。

<div ng-controller="exampleCtrl">
  <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

JS 与教程相同。看起来像一个错误。

【问题讨论】：

除非您将 ag-grid div 放在高度为 0 的 div 内...所以 0 的 100% 为 0。给具有 ng-controller 的 div 一些高度或设置ag-grid 在 body 标记内，如示例所示。
好点，这个原版怎么样：<body ng-app="example" ng-controller="exampleCtrl"> <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div> </body> </html>
@JarodMoser 它不应该是父
，因为我们一直这样做是为了不为任何父
指定任何高度，它应该自动扩展，除非有“固定”属性。
顺便说一句，浏览器是 FF 50.1.0
我的原始评论是基于 ag-grid 文档的 width and height 部分。我尝试重新创建运行本地文件的问题，但无法重现。我尝试使用 JSFiddle 和 plunkr，但这些网站有更多的 JS 正在调整 iframe 中 HTML 标记的高度并导致不同的魔法发生......

【解决方案1】：

这几乎可以肯定是因为您的 html 文件中有 DOCTYPE html。

如果你这样做了，那么你需要确保网格容器有一个非 0 的高度来填充，否则它会像你发现的那样显示为一条平线。

这不是 ag-Grid 特定的问题 - 这是未使用 quirks 模式的副作用。

对你来说最简单的事情是：

<style>
    html, body {
      width: 100%;
      height: 100%;
    }

This StackOverflow Question/Answer 很好地解释了根本问题

【讨论】：

它说明了原因。直到我删除了中的所有内容，您的解决方案才起作用，让它没有属性。这是我原来的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这很有趣 - 感谢您的更新。我得看看那个

【解决方案2】：

您应该尝试通过设置 DomLayout 来设置 ag-grid 的 autoHeight。

有关 angular 的信息，请参见下面的示例代码。

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    //The ag-grid is not enlarging based on the page height, 
    //so dynamically adjusting the height of the grid
    this.gridApi.setDomLayout("autoHeight");
}

参考见https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview

【讨论】：

这对我有用，在网格 html 中添加了 (gridReady)="onGridReady($event)" 并从 css 中删除了 height 选项。
如果我理解正确的话，这与将高度设置为 100% 并不完全相同：它解决了网格高度为零的问题，但它会尝试将网格大小调整为其内容（并且可能会导致大量行的性能损失，因为它会尝试测量每一行），而不是采用完整的可用高度。见ag-grid.com/javascript-grid/grid-size/#grid-auto-height。

【解决方案3】：

.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
    height: 100%;
}

【讨论】：

谢谢！只有这个解决方案对我有用。