角度材料对话框 - 固定位置元素高度随机切断

Question

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

此处的代码笔：http://codepen.io/kathk1/pen/woQWRZ

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

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

是什么让它做到这一点和/或我如何让它停止这样做？我很难过。

抱歉为了清晰起见而编辑：我希望红色矩形扩展到对话框的完整900px 。我不希望对话框滚动。

Answer 1

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

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

Answer 2

START UPDATE 1

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

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

END UPDATE 1

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

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>',