参见英文答案 >
Scrollable div to stick to bottom,when outer div changes in size5个
目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且之前位于div底部的内容将被隐藏.
目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且之前位于div底部的内容将被隐藏.
我希望这在相反的方向上工作：当div调整大小时,内容保持固定到底部边框,先前在顶部的内容折叠.
可以把它想象成手机上的典型信使应用程序.当您输入文本并且输入框的大小增加时,它会使显示先前消息的区域变小,但是当发生这种情况时,内容将固定为底部边框.
如何在HTML / CSS / JavaScript中实现此目的？
解决方法
这可以使用CSS完成,正如我在
this answer中所展示的那样.
这是实现它的代码部分.
html,body { height:100%; margin:0; padding:0; }
.chat-window{
display:flex;
flex-direction:column;
height:100%;
}
.chat-messages{
flex: 1;
height:100%;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text{ overflow: auto; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
.chat-messages-text{ overflow: visible; }
/* reset Edge as it identifies itself as webkit */
@supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }
}
<div class="chat-window">
<div class="chat-messages">
<div class="chat-messages-text" id="messages">
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
Long long content 1!<br/>
Long long content 2!<br/>
Long long content 3!<br/>
Long long content 4!<br/>
Long long content 5!<br/>
</div>
</div>
</div>
