Shiny中page_fillable无法填充面板剩余空间，如何解决？

架构老林

2026-6-19

解决Shiny中page_fillable无法填充页面剩余空间的问题

问题出在你使用了mainPanel（它默认带固定宽度约束），以及page_fillable的嵌套位置不对，导致内容无法占满右侧空间。以下是修改后的代码，能让Data和Plot面板填满页面剩余区域：

library(shiny)
library(shinyWidgets)
library(bslib)

ui <- 
  page_sidebar(
    titlePanel("A shiny example"),
    sidebar = sidebar(
      title = 'a sidebar',
      id = "sidebar",
    ),
    # 移除mainPanel，直接将内容放在page_sidebar的主区域
    page_fillable(
      tabsetPanel(
        width = "100%", # 让标签页容器占满可用宽度
        tabPanel('Data', 
                 div(style = "background-color: green; padding: 10px; width: 100%; height: 100%;",
                     tableOutput('dt')
                 )
        ),
        tabPanel('Plot', 
                 div(style = "overflow-x: scroll; overflow-y: scroll; background-color: blue; width: 100%; height: 100%;",
                     plotOutput("pplot", width = "100%", height = "100%"))
        )
      )
    )
  )


server <- function(input, output, session){ 
}

shinyApp(ui = ui, server = server)

关键改动说明：

移除mainPanel：page_sidebar的主内容区域不需要嵌套mainPanel，它自带的布局会自动适配剩余空间，mainPanel的默认宽度限制会导致内容无法拉伸。
将page_fillable包裹整个tabsetPanel：让标签页所在的整个区域都能填充页面剩余的空间。
设置tabsetPanel(width = "100%")：强制标签页容器占满父元素的宽度。
给内部容器和输出组件设置width: 100%; height: 100%;：确保子元素也能填满所在的容器空间，避免出现空白。