70 lines
1.9 KiB
CSS
70 lines
1.9 KiB
CSS
/* ===== 修复输入框遮挡消息的问题 ===== */
|
||
|
||
/* 设置输入框高度变量 */
|
||
:root {
|
||
--chat-input-height: 160px; /* 聊天输入框的默认高度（包含padding） */
|
||
}
|
||
|
||
/* 方案B：fixed定位的输入框需要为消息列表预留空间 */
|
||
|
||
/* 聊天消息区域 - 添加底部内边距避免被fixed输入框遮挡 */
|
||
#chatMessages {
|
||
padding-bottom: calc(var(--chat-input-height) + 10px) !important; /* 输入框高度 + 小间距 */
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 确保在各种选择器下都生效 - 使用更强的选择器 */
|
||
body .chat-messages,
|
||
body div#chatMessages,
|
||
body #chatContainer #chatMessages,
|
||
html body #chatMessages.chat-messages {
|
||
padding-bottom: calc(var(--chat-input-height) + 10px) !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 处理iOS安全区域 */
|
||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||
#chatMessages {
|
||
padding-bottom: calc(var(--chat-input-height) + env(safe-area-inset-bottom) + 10px) !important;
|
||
}
|
||
}
|
||
|
||
/* 聊天输入框保持fixed定位 */
|
||
#chatModeInput {
|
||
position: fixed !important;
|
||
bottom: 0 !important;
|
||
z-index: 30 !important;
|
||
/* 其他样式保持不变 */
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
:root {
|
||
--chat-input-height: 120px; /* 移动端输入框高度 */
|
||
}
|
||
}
|
||
|
||
/* 当输入框展开时（多行文本）的处理 */
|
||
#chatModeMessageInput:focus {
|
||
/* 输入框获得焦点时可能需要更多空间 */
|
||
}
|
||
|
||
/* 覆盖任何内联样式 */
|
||
#chatMessages[style*="padding-bottom"] {
|
||
padding-bottom: calc(var(--chat-input-height) + 20px) !important;
|
||
}
|
||
|
||
/* 使用伪元素创建底部空间 */
|
||
#chatMessages::after {
|
||
content: '';
|
||
display: block;
|
||
height: var(--chat-input-height);
|
||
min-height: 160px;
|
||
width: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 确保最后一个消息有适当的底部间距 */
|
||
#chatMessages > *:last-child {
|
||
margin-bottom: 10px !important; /* 只留10px的小间距 */
|
||
} |