Angular Material Dialog - 固定位置元素高度在随机点被切断

Question

我需要在 Angular Material 对话框中添加一个元素，该元素具有自己的高度并且不受对话框的影响（想象一下自定义下拉菜单）。每当我这样做时，对话框都会在底部被切断，但非常奇怪 - 不是直接在对话框的底部。它被允许超出底部约 20px，然后被随机切断。

这里的代码笔：http://codepen.io/kathk1/pen/woQWRZ

.rectangle {
  background: red;
  height: 900px;
  width: 200px;
  position: fixed;
  z-index: 2000;
}

如果您启动该对话框，在这种情况下作为固定元素的红色矩形应该是 900 像素高，但不允许达到那么高。

是什么让它这样做和/或我如何让它停止这样做？我被难住了。

抱歉，为了清晰起见进行了编辑：我希望红色矩形扩展到其完整的 900 像素 超出对话框。我不想让对话框滚动。

Answer 1

你想在白色方块内制作红色矩形吗？

如果是这样，请将属性 position:fixed; 更改为 position: relative;，白色方块将获得垂直滚动。

Answer 2

开始更新 1

根据您的编辑，md-dialog 隐藏了 overflow 的内容。您将需要覆盖此行为以显示整个矩形。使用您现有的 css，添加它以显示矩形。

md-dialog.md-default-theme
{  
  overflow: visible !important;
}

结束更新 1

---

您可以创建一个外部div，将a设置为选择的固定高度，让里面的内容溢出并滚动。

css

.wrapOne{     
    overflow-y: scroll;
    height:30px;
}
.rectangle {
    background: red;
    height: 900px;  
    width:200px;
}

模板

    '<md-dialog aria-label="Sample Dialog">' +
    '<md-content>'+
    '<div class="wrapOne"><div class="rectangle">TESTING------TESTING------TESTING------TESTING------TESTING------</div></div>'+
    '    <md-list>'+
    '      <md-item ng-repeat="item in ctrl.items">'+
    '       <p>{{item}}</p>' +
    '      </md-item>'+
    '    </md-list>'+
    '  </md-content>' +
    '  <div class="md-actions">' +
    '    <md-button ng-click="ctrl.closeDialog()">' +
    '      Close Greeting' +
    '    </md-button>' +
    ' ' +
    '</md-dialog>',