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

Question

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

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

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

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

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

抱歉编辑清晰:我希望红色矩形扩展到其整个 900px 超出对话框。我不希望对话框滚动。

Answer 1

你想把红色矩形放在白色方 block 里面吗？

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