溢出隐藏不起作用"vertical aligned bottom" - div 在绝对定位的外部 div

Question

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

我的目标是创建一个"日志窗口"，我可以在其中从下到上显示消息。如果没有足够的空间，顶部消息应逐渐消失(溢出隐藏)。

问题：

首先，不考虑高度，如果我在里面放更多的div，容器会增长并超过100px，正如你在jsfiddle上的例子中看到的那样(目前是116px)。 其次，如果我将其强制为 100px，它将剪切底部的div 而不是顶部的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>