如何将Streamlit聊天输入框与按钮固定在页面底部？

你的核心问题是Streamlit原生组件的布局逻辑与自定义CSS的冲突：st.chat_input会被插入到页面的DOM流中，单纯用外层div包裹无法强制它固定在底部，且消息列表增长时会把输入区域顶起。以下是可行的解决方案：

关键修改点 #

1. 消息区域优先渲染：先渲染所有聊天消息，再渲染输入组件，确保输入框始终处于页面最下方。
2. 主内容区添加底部内边距：避免最新的消息被固定的输入框遮挡。
3. 用自定义CSS强制固定输入容器：直接控制输入组件的父容器定位，同时调整组件样式适配布局。

修改后的完整代码 #

# 自定义CSS实现底部固定输入区
st.markdown("""
<style>
.fixed-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 9999;
    box-sizing: border-box;
}

/* 避免消息被输入框遮挡，给主内容区加底部padding */
.main .block-container {
    padding-bottom: 90px !important;
}

/* 让聊天输入框占满容器宽度 */
.fixed-input-container .stChatInput {
    flex: 1;
}

/* 调整麦克风按钮样式 */
.fixed-input-container .stButton>button {
    width: 50px;
    height: 40px;
    border-radius: 5px;
}
</style>
""", unsafe_allow_html=True)

# 初始化会话消息（如果还没初始化）
if "messages" not in st.session_state:
    st.session_state.messages = []

# 渲染历史聊天消息
for msg in st.session_state.messages:
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

# 底部固定输入容器
st.markdown('<div class="fixed-input-container">', unsafe_allow_html=True)
col1, col2 = st.columns([9, 1])
with col1:
    prompt = st.chat_input("Enter your message", key="text_input")
with col2:
    mic_button = st.button("🎤", key="voice_button", use_container_width=True)
st.markdown('</div>', unsafe_allow_html=True)

# 麦克风按钮处理逻辑
if mic_button:
    st.session_state.is_speaking = True

if "is_speaking" in st.session_state and st.session_state.is_speaking:
    speech_text = recognize_speech()  # 你的语音识别函数
    st.session_state.is_speaking = False
    if speech_text:
        st.session_state.messages.append({"role": "user", "content": speech_text})
        send_message(speech_text)

# 文本输入处理逻辑
if prompt:
    st.session_state.messages.append({"role": "user", "content": prompt})
    send_message(prompt)

# 示例send_message函数（根据你的需求修改）
def send_message(user_input):
    # 模拟AI回复，替换为你的实际业务逻辑
    ai_response = f"收到消息：{user_input}"
    st.session_state.messages.append({"role": "assistant", "content": ai_response})
    st.rerun()  # 刷新页面显示新消息

生效原理 #

• position: fixed让输入容器脱离页面流，始终固定在视窗底部，z-index:9999确保它不会被其他内容覆盖。
• padding-bottom给主内容区预留了输入框的高度，保证最新消息不会被遮挡。
• 先渲染消息再渲染输入组件，符合Streamlit从上到下的布局逻辑，避免输入框被消息列表挤到上方。

内容的提问来源于stack exchange，提问作者Efe Can Demir