如何获得R使用100%闪亮仪表板高度的传单

我正在创建一个闪亮的仪表板应用程序，仪表板主体应该显示一些地图。到目前为止，让地图在身体的整个宽度上展开没有问题，但它不知何故不愿意调整到整个高度。

传单本身已经设置为覆盖100%的高度，但它没有做到这一点。一旦我为传单输出使用“高度”属性，传单对象将根本不显示，我将得到一个空框

代码如下所示：

library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Maps", 
        tabName = "maps", 
        icon = icon("globe"),
        menuSubItem("Watersheds", tabName = "m_water", icon = icon("map")),
        menuSubItem("Population", tabName = "m_pop", icon = icon("map"))
      ),
      menuItem(
        "Charts", 
        tabName = "charts", 
        icon = icon("bar-chart"),
        menuSubItem("Watersheds", tabName = "c_water", icon = icon("area-chart")),
        menuSubItem("Population", tabName = "c_pop", icon = icon("area-chart"))
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "100%",
          leafletOutput("l_watershed")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$l_watershed <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "11",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Catchment area provided by HELCOM"
    )
  })

  output$l_population <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "17",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Population data provided by HELCOM"
    )
  })
}

shinyApp(ui, server)

库（ShinydaShashboard）
图书馆（单张）
用户界面%setView（19.08,60.25，缩放=4）%%>%addWMSTiles(
"http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
layers=“17”，
选项=WMSTileOptions(
format=“image/png”，
透明=真实
),
Attribute=“HELCOM提供的人口数据”
)
})
}
shinyApp（用户界面、服务器）

尝试手动添加像素大小：

...
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "1000px",
          leafletOutput("l_watershed",width="100%",height="1000px")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population",width="100%",height="1000px")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
...

---

我个人发现，相对于窗口大小设置高度更令人满意。高度百分比不起作用，因为仪表板主体具有未定义的高度。但是相对于整个文件来说是可以的

100%的仪表板主体为100vh（ccs3单元）减去表头（最小50px）减去仪表板主体填充（2*15px）

所以，将高度设置为100vh-80px，你应该会没事的

由于shiny不支持css3单元，因此必须将其直接包含在文档中，如下面的代码所示

library(shiny)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
    leafletOutput("map")
  )
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles() %>% setView(42, 16, 4)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)

库（闪亮）
图书馆（shinydashboard）
图书馆（单张）
uiTh
vh
装置不适用于某些旧的移动浏览器。下面的css适用于计算机和移动设备

/* for computer */
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}

@media all and (max-width:768px){
/* for mobile */
div.outer  {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}
}

另一个选项是和所描述的内容

我可以使用
R flexdashboard中的
传单贴图
如果您想将传单贴图与另一种面板结构（如navBarPage）相结合，包括tabPanel中的贴图，也可以这样做：

标记$style（type=“text/css”，“html，body{width:100%；height:100%}”），
标记$style（type=“text/css”，“#map{height:calc（100vh-80px）！important；}”），
传单输出（“地图”，宽度=“100%”，高度=“100%”，

基于@K.Rohde的答案，我一直在使用

#map {
    height: calc(100vh - 130px) !important;
}

@media only screen and (min-width: 768px) {
    #map {
    height: calc(100vh - 80px) !important;
    }
}

或者在
Box
中，您可以使用
标记$style（type=“text/css”，“.Box body{height:80vh}”），
然后
传单输出（“l_流域”，width=“100%”，height=“100%”）
添加像素大小的效果。。。但是，高度取决于用户的屏幕，不能设置为固定值。因此，需要增加百分比。有没有可能做到这一点？使用
tags$style（type=“text/css”，“.box body{height:80vh}”）
可以提供帮助并给出解决方案！Thanks@ThomasBecker
80vh
它不是完全正确的——它只是屏幕的80%。。所以可能@K.Rohde版本会更好，@K.Rohde版本是更精确的方法。然而，你的回答回答了问题，也解决了问题。我太爱你了！我折磨了自己一个月，想知道怎么做哇，我尝试了这么多不同的解决方案，在这个问题上花了至少15-20个小时。这是第一个（唯一的？）对我有效的方法。非常感谢。您还可以直接在输出中使用视口高度（vh）：输出（“地图”，height=“95vh”）
#map {
    height: calc(100vh - 130px) !important;
}

@media only screen and (min-width: 768px) {
    #map {
    height: calc(100vh - 80px) !important;
    }
}