You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用flexdashboard+runtime: shiny时,vertical_layout: scroll致图表显示不全

问题:Flexdashboard中Shiny图表在scroll布局下被遮挡

在启用runtime: shiny的flexdashboard中,使用默认vertical_layout: fill时图表显示正常,但切换为vertical_layout: scroll后,图表会被部分遮挡,找不到调整容器(非图表本身)高度以完整显示图表的方法。明明图表没占满屏幕空间,却出现了滚动条。

可复现代码

---
title: "Minimal Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: scroll
runtime: shiny
---

## Row 1 {data-height=800}

```{r}
ui <- fluidPage(
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)
## 原因分析与解决方法

### 核心原因
当设置`vertical_layout: scroll`时,flexdashboard的行容器高度计算逻辑和`fill`模式不同:`fill`会让容器自适应视口高度,而`scroll`会按内容实际高度渲染。但Shiny的`fluidPage`自带默认内边距和高度限制,导致其无法完全填充flexdashboard的行容器,内部图表高度被挤压;同时叠加的样式可能让整体高度略超出视口,触发不必要的滚动条。

### 解决方法1:移除多余的Shiny容器
直接在代码块中使用`plotOutput`,让图表直接挂载到flexdashboard的行容器中,利用`data-height`参数控制容器高度:
```yaml
---
title: "Fixed Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: scroll
runtime: shiny
---

## Row 1 {data-height=800}

```{r}
output$plot <- renderPlot(plot(1:5))
plotOutput("plot", height = "500px")
### 解决方法2:自定义Shiny容器样式
如果必须保留`fluidPage`,可以通过内联样式强制其填充父容器,并移除默认内边距:
```yaml
---
title: "Fixed Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: scroll
runtime: shiny
---

## Row 1 {data-height=800}

```{r}
ui <- fluidPage(
  style = "height: 100%; padding: 0;",
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)
### 关于滚动条的说明
`vertical_layout: scroll`的设计是让页面内容按实际高度展示,仅当内容总高度超过视口时才出现滚动条。出现无意义滚动条的原因是flexdashboard行容器的`data-height`、Shiny容器默认样式叠加后,整体高度略超出视口。通过上述方法调整容器样式后,即可避免该问题。

内容的提问来源于stack exchange,提问作者rempsyc
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 16:03:17