如何让NiceGUI组件不被页眉和页脚遮挡，同时保持内容居中？

我来帮你解决这个问题！你遇到的核心是布局空间冲突：原来的absolute-center是绝对定位规则，会让内容容器直接占满整个视口，完全忽略页眉和页脚的存在，所以才会出现组件被遮挡的情况。咱们可以通过调整Flex布局，让内容区域自动避开页眉和页脚，同时保持居中效果。

修改方案 #

你只需要调整theme.py里的frame函数，重新定义页面的整体布局逻辑：

from contextlib import contextmanager
from menu import menu
from side_menu import side_menu
from nicegui import ui

@contextmanager
def frame(navigation_title: str):
    """Custom page frame to share the same styling and behavior across all pages"""
    ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
    # 设置整个页面为垂直Flex布局，高度占满屏幕
    ui.body().classes('flex flex-col h-screen')
    
    with ui.header(elevated=True):
        ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
        ui.space()
        ui.label(navigation_title)
        ui.space()
        with ui.row():
            menu()
    
    # 主内容区域：填充页眉和页脚之间的剩余空间，同时内部居中，内容过长时自动滚动
    with ui.column().classes('flex-1 flex items-center justify-center overflow-auto p-4'):
        yield
    
    with ui.left_drawer().classes('bg-blue-100') as left_drawer:
        side_menu()
    
    with ui.footer().style('background-color: #3874c8'):
        ui.label('Test Footer')

关键改动说明 #

• ui.body().classes('flex flex-col h-screen')：让整个页面采用垂直方向的Flex布局，并且高度占满屏幕，这样页眉、主内容、页脚会按垂直顺序排列。
• flex-1：让主内容区域自动填充页眉和页脚之间的所有剩余空间，不会和页眉/页脚重叠。
• flex items-center justify-center：让主内容区域内部的元素同时实现水平和垂直居中。
• overflow-auto：当内容过多超出主区域高度时，会自动出现滚动条，避免内容被截断或遮挡。
• p-4：给内容区域添加一点内边距，让组件不会紧贴边缘，提升视觉体验。

这样修改后，你添加的所有组件都会乖乖待在页眉和页脚之间的居中区域，既不会被遮挡，也能保持你想要的居中效果~

备注：内容来源于stack exchange，提问作者JBlev9796