HTML样式，显示的消息从底部开始，但是不能滚动？

Question

我想创建一个像微信一样的表面。所有消息都从底部开始，但是为什么它不能滚动？如果消息从顶部开始，则可以滚动..但我希望消息从底部开始。

如何改进我的脚本？谢谢。

<div style="height: 100vh; background-position: top center; width: 100%; max-height: 1366px; position: relative;">
	<div style="height: 40px; background-color: black; color: white; line-height: 40px; position: fixed; top: 0px; width: 100%; z-index: 999" align="right">
		<div style="margin-right: 1em">menu</div>
	</div>
	<div style="bottom:0; background-color: white; color: white; line-height: 50px; position: fixed; width: 100%; height: 50px; z-index: 999; border-top: 1px solid #D3D3D3;" align="right">
		<div style="width: 100%">
			<div style="padding-left:1em; padding-right: 1em;" align="left"><input type="text" style="width: 90%;"><div style="float: right; border: 2px solid grey; height: 20px; margin-top: 0.5em; width: 20px; border-radius: 30px; color: grey; line-height: 20px; font-size: 1.5em;" align="center">+</div></div>
		</div>
	</div>
	<div style="background-color: transparent; color: white; position: absolute; width: 100%; height: 100%; overflow: auto;" align="right">
		<div style="padding-top: 40px; padding-right: 1em; padding-left: 1em; padding-bottom: 60px; position: absolute; bottom: 0; overflow-y: scroll;">
			<div style="width: 100%; color: black; padding-top: 1em; font-size: 12px;">
				<div>First message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Last message</div>
			</div>
		</div>
	</div>
</div>

我想创建一个像微信一样的表面。所有消息都从底部开始，但是为什么它不能滚动？如果消息从顶部开始，则可以滚动..但我希望消息从...开始。

Answer 1

为所有消息的父div提供ID“聊天”并使用此脚本