css - Shinydashboard 选项卡框高度

Question

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

我玩了这个例子，修改后的例子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
    )

Answer 1

您可以使用vh定义为视口高度的 1% 的 css 单位，然后基本上遵循此答案中的示例，在该示例中设置 css 中的相对高度：

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

当然，您也可以将其放在外部 css 文件中，特别是如果您要执行这些 css 技巧中的一个以上。由于标题，100% 略微超过底部边缘。大约 90% 似乎工作正常。