Question

我有一个弹出对话框，其中包含一系列项目。我试图给项目列表一个相对于屏幕整体高度的最大高度。

在摆弄一些样式之后，我觉得当弹出对话框有max-height时它不起作用，因为它在计算中创建了一个循环：弹出对话框的高度取决于项目列表中的高度，max-height的项目列表取决于弹出对话框的高度。

请参阅随附的plunkr示例：当#popup-container的最大高度为66％时，项目列表（弹出内容）没有最大高度。

http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview

Answer 1

这似乎可以解决问题：整个CSS页面：

/* Styles go here */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#popup-container {
  position:fixed;
  max-height: 66%; 
  border: 1px solid black;
  width: 500px;
  bottom: 0;
  right: 0;
  overflow: auto;
}

.popup-footer , .popup-header {
  display: block;
  background: #ccc;
  height: 20px;
  position: fixed;
  width: 480px;
}
.popup-footer{
  position: fixed;
  bottom: 0;
}

虽然页脚有点hacky ...我不确定如何解决那个问题。我给页眉/页脚一个宽度，所以它不会超过滚动条：S

在“position：fixed”内部，最大高度不起作用百分比

1 个答案: