Shinydashboard选项卡高度调整

Question

我正在尝试创建一个跨越整个“mainPanel”的“tabBox”。我能够使宽度跨越整个屏幕，但无法使高度也跨越整个屏幕。我不希望使用像素（或其他单位）的绝对值，因为我希望应用程序可用于不同的屏幕。

我对示例进行了修改，并且示例中修改后的“tabBox”如下。

fluidRow(
        tabBox(
            title = "First tabBox",
            # The id lets us use input$tabset1 on the server to find the current tab
            id = "tabset1", height = "450px",
            tabPanel("Tab1", "First tab content"),
            tabPanel("Tab2", "Tab content 2"),
            width = 12
        ),
        height = '20%',
        width = 12
    )

- TheComeOnMan

Answer 1

你可以使用CSS单位vh，它被定义为视口高度的1%，然后基本上按照这个答案中的示例设置CSS中的相对高度：

  fluidRow(
    tabBox(
    tags$head(
      tags$style(HTML(" #tabBox { height:90vh !important; } "))
    ),
    id="tabBox",
    title = "tabBox",
    width = 12
    )

当然，如果您要做多个这样的CSS技巧，也可以将其放在外部CSS文件中。100%会稍微超出底部边缘，因为有标题。大约90％似乎效果不错。

- FvD

---

谢谢！我稍后会尝试一下并回复你。不过你知道为什么 height = "100%" 不起作用吗？ - TheComeOnMan

我刚刚检查了解决方案，虽然它适用于 tabbox，但似乎并不普遍适用。例如，在绘图中添加了 height = 400px，它似乎会覆盖我在 tag 函数中指定的高度。 - TheComeOnMan

是的，如果您选择固定高度为400像素，则该高度将成为图形的固定高度。我相信您也可以通过与上述方式相同的方式使您的图形相对于视图高度。如果您需要混合它们，则需要进行一些实验以查看如何混合和匹配您想要相对的部分和您想要固定高度的部分。 - FvD