html - 溢出隐藏不适用于 "vertical aligned bottom"- 绝对定位的外部 div 中的 div

Question

我的 div 有问题，它与 div 的底部垂直对齐。

我的目标是创建一个“日志窗口”，我可以在其中从下到上显示消息。如果没有足够的空间，顶部的消息应该消失( overflow hidden )。

问题:

首先，不考虑高度，如果我在里面放更多的 div，容器会增长并超过 100px，正如您在 jsfiddle 上的示例中看到的(当前为 116px)。其次，如果我将它强制设置为 100px，它将剪切底部的 div 而不是顶部的。我想在底部看到最新消息 (7, 6, 5, ...),

具有绝对位置的外部div需要保留。

为了更好地理解，我创建了一个 jsfiddle:

https://jsfiddle.net/vbdo9xun/4/

#notifications {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 100000000;
  overflow: hidden;
}

#notifications .content {
  width: 350px;
  height: 100px;
  padding: 2px 4px 2px 4px;
  background-color: #321d12;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: bottom;
}

#notifications .content div {
  font-size: 10px;
  color: #efb718;
}

<div id="notifications">
  <div class="content">
    <div>1. Lorem ipsum dolor sit amet, consetetur!</div>
    <div>2. tempor invidunt ut labore et dolore magna!</div>
    <div>3. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut!</div>
    <div>4. sit amet, consetetur!</div>
    <div>5. invidunt ut labore et dolore magna!</div>
    <div>6. Lorem tempor invidunt ut labore et dolore!</div>
    <div>7. Amet Lorem ipsum dolor sit amet, consetetur!</div>
  </div>
</div>

Answer 1

您也可以在 content 上使用 position: absolute，从底部开始

#notifications {
  position: absolute;
  width: 100%;
  top: 1px;
  top: 4px;
  height: 100px;          /* set height here instead */
  overflow: hidden;
}

#notifications .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 350px;
  padding: 2px 4px 2px 4px;
  background-color: #404040;
  color: white;
  font-family: Arial;
  box-sizing: border-box;
}

#notifications .content div {
  font-size: 12px;
}

<div id="notifications">
  <div class="content">
    <div>1. Lorem ipsum dolor sit amet, consetetur!</div>
    <div>2. tempor invidunt ut labore et dolore magna!</div>
    <div>3. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut!</div>
    <div>4. sit amet, consetetur!</div>
    <div>5. invidunt ut labore et dolore magna!</div>
    <div>6. Lorem tempor invidunt ut labore et dolore!</div>
    <div>7. Amet Lorem ipsum dolor sit amet, consetetur!</div>
  </div>
</div>