溢出隱藏不工作的「垂直對齊的底部」 - 在絕對定位的外部div divs

Question

我有一個問題，關於我的divs，這是垂直對齊的div的底部。

我的目標是創建一個「日誌窗口」，在那裏我可以顯示從下到上的消息。如果沒有足夠的空間，頂部的消息應該消失（溢出隱藏）。

問題：

首先，高度不考慮，如果我把更多的div內，容器將增長和上層建築100px的，因爲你可以看到的例子上的jsfiddle（目前爲116像素）。第二，如果我強制它達到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

你可以像現在這樣，用在contentposition: 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>