如何让OBS浏览器源中两个长度不同的聊天从底部向上延伸？

针对你需要的两个聊天窗口（#messages 和 #messages2）从底部开始、消息向上延伸的效果，直接通过调整CSS布局并配合少量JS修改即可实现，以下是具体方案：

核心CSS调整 #

给两个聊天容器添加Flex布局属性，让消息默认对齐容器底部，同时保留滚动功能：

/* 聊天容器基础样式（保留你原有宽高、边框等，新增Flex相关属性） */
#messages, #messages2 {
  width: 400px; /* 替换成你实际的宽度 */
  height: 600px; /* 替换成你实际的高度 */
  border: 2px solid #333;
  overflow-y: auto; /* 消息超出时显示滚动条 */
  /* 关键布局属性 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 让消息整体对齐容器底部 */
  padding: 10px;
  gap: 10px; /* 消息间的间距，替代margin更简洁 */
}

/* 单条消息容器样式（保留你原有样式，可按需调整） */
.message-container {
  background-color: #e5e5ea;
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 75%;
  word-wrap: break-word;
}

/* 可选：区分发送者消息（右对齐） */
.message-container.sender {
  align-self: flex-end;
  background-color: #0084ff;
  color: #fff;
}

JavaScript调整（按需选择） #

根据你需要的消息排列逻辑，选择对应的添加方式：

1. 新消息出现在底部（常规聊天逻辑） #

保持原有appendChild的方式，新消息自动追加到容器底部，配合CSS的justify-content: flex-end，消息会从底部开始向上填充：

function addMessage(containerId, content, isSender = false) {
  const container = document.getElementById(containerId);
  const messageDiv = document.createElement('div');
  messageDiv.className = `message-container ${isSender ? 'sender' : ''}`;
  messageDiv.textContent = content;
  
  container.appendChild(messageDiv);
  // 可选：自动滚动到最新消息
  container.scrollTop = container.scrollHeight;
}

2. 新消息出现在现有消息上方（向上延伸） #

如果需要新消息放在已有消息的上方（视觉上向上堆叠），改用prepend方法：

function addMessage(containerId, content, isSender = false) {
  const container = document.getElementById(containerId);
  const messageDiv = document.createElement('div');
  messageDiv.className = `message-container ${isSender ? 'sender' : ''}`;
  messageDiv.textContent = content;
  
  container.prepend(messageDiv);
}

效果说明 #

• 当消息数量较少时，所有消息会紧贴容器底部，不会像默认布局那样贴在顶部。
• 消息数量超过容器高度时，自动出现垂直滚动条，可滚动查看上方的旧消息。
• 两种JS方案分别对应“新消息在底部”和“新消息在上方”的延伸逻辑，按需切换即可。

内容的提问来源于stack exchange，提问作者Elektrodemon NL