在位置固定元素上设置max-height

Question

我在页面左侧的按钮中有一个通知元素，从底部突出显示通知

#alert-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 300px; // <--- THIS IS THE PROBLEM
  overflow: hidden;
  z-index : 100000;
  width : 100%;

  #alert-container {
    position : absolute;
    bottom : 0;
    left: 0;
    width : 100%;
  }
}

HTML，这里简单的东西

<div id="alert-wrap">
    <div id="alert-container"></div>
</div>

显示有效，但由于高度设置为300，因此它与内容重叠并阻止用户点击内容。

无论如何在这个外部元素上设置max-height只占用内部通知所需的空间吗？

我玩过但它总是消失......

Answer 1

这是您的解决方案

#alert-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  max-height: 300px; /* max height */
  overflow: hidden;  /* hide overflow */
  z-index : 100000;
  width : 100%;
}
#alert-container {
  /* Nothing, keep it in the flow ! Or use relative position */
}

另外，你应该从不将id选择器包装在另一个中。