Angular Material Dialogs 修复了跨浏览器的高度问题答案

【问题标题】：Angular Material Dialogs fixed height issues across browsersAngular Material Dialogs 修复了跨浏览器的高度问题
【发布时间】：2017-09-26 10:03:03
【问题描述】：

我一直在努力寻找一种适用于我所有用例的解决方案，并认为我终于找到了一个我想分享的解决方案。

我想要的是一个粘性页眉、粘性页脚和可在全屏模式下工作的可滚动内容。它还需要适用于所有浏览器（是的，你也是 Safari！）。

最后，我不想求助于 CSS 覆盖，因为我知道 Angular Material 1.x.x 并不能很好地与 Safari 配合使用。

以下模板是我得到的。如果您有改进或有帮助，请大声喊叫！

<md-dialog flex-xl="25"
           flex-lg="30"
           flex-md="40"
           layout="column">
  <md-toolbar class="md-toolbar-tools" flex="none">
    <h2>Add Friends</h2>
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      <md-icon>clear</md-icon>
    </md-button>
  </md-toolbar>

  <md-content flex-xs="100" flex-sm="100">
    <!--Your content here-->
  </md-content>

  <md-dialog-actions flex="none">
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

您会注意到 flex-xs="100" 和 flex-sm="100"。我在这些场景中全屏显示，因此请进行相应调整。

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

我不知道这是否正是你想要的，但我最近遇到了一个类似的问题，我需要 md-dialog 有一个粘性工具栏（下面有粘性标签）和底部的粘性页脚模态的。（我正在为用户 cmets 使用对话框。）我最终将需要滚动的对话框内容包装到 md-content div 中，并为 overflow-y 行为编写了一些自定义 css。

这是我的 HTML：

<md-dialog>
    <md-dialog-toolbar>
    </md-dialog-toolbar>
    <md-tabs>
        <md-tab>
            <md-tab-body>
                <div id="comments">
                    <div class="comments-list-wrapper">
                        <md-content class="chat">
                        </md-content>
                    </div>
                    <md-dialog-actions id="footer">
                    </md-dialog-actions>
                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>
</md-dialog>

这是我的 CSS：

#comments {
    .comments-list-wrapper {
        min-height: 200px;
    }
    md-dialog-actions#footer {
        order: 1;
        flex-shrink: 0;
    }
    .chat {
        max-height: 320px;
        overflow-y: scroll;
    }
}

我不知道这是否正是您要寻找的东西，但实际上它确实是this。

【讨论】：