R-shiny中的leaflet: leaflet地图的100%高度

Question

我正在尝试构建一个显示leaflet地图的应用程序。使用该应用程序的人大多数是通过移动设备进行操作，因此将地图完全展示在屏幕上会更加方便。您可以在此处查看该应用程序：https://js1984.shinyapps.io/stackoverflow/ 使用leafletOutput("mymap", width = "100%")可以正常设置宽度，但是我无法将高度设置为 leafletOutput("mymap", width = "100%", height = "100%")：当我运行应用程序时，地图会消失... 将高度设置为固定值可以正常工作，但是显然这不是一个选项。

到目前为止，我发现的所有解决方案都没有对我起作用，例如在CSS中设置高度为100%：

html, body, #mymap {
   height:100%;
   width:100%;
   padding:0px;
   margin:0px;
} 

应用程序的UI部分如下所示：

 ui <- navbarPage(title = "test",
             collapsible = T,
             position= "static-top",
             inverse = T,
             #####################################
             # the tab panel that includes the MAP
             #####################################
             tabPanel("Map",
             includeCSS(path="www/bootstrap.css"),
                      leafletOutput("mymap", width =  "100%")
             ),
             #####################################
             # other tab panels
             #####################################
             tabPanel("Fri",
                      fluidRow(
                        includeCSS(path="www/bootstrap.css"),
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("freitag",
                                                    h3("Freitag"),
                                                    list_fr,
                                                    selected = 1
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Sat",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("samstag",
                                                    h3("Samstag"),
                                                    list_sa
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Sun",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("sonntag",
                                                    h3("Sonntag"),
                                                    list_so
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Mon",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("montag",
                                                    h3("Montag"),
                                                    list_mo
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Tues",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("dienstag",
                                                    h3("Dienstag"),
                                                    list_di
                                 )
                               )
                        )
                      )
             )
)

- j_5chneider

---

据我所知，不可能将高度和宽度这两个属性都设置为百分比。 - four-eyes

实际上是可能的，它在Superzip中已经实现了。但是，我也无法弄清楚如何实现。 - Dogan Askan

但无论如何，这里是解决方案。 - Dogan Askan

Answer 1

正如Dogan Askan (感谢!)在这个评论中指出的那样，使用calc()和窗口高度的解决方案对我有效。 请参见此答案以获得更详细的示例。

- j_5chneider

Answer 2

请看这个解决方案。它将css应用于container-fluid类，这可能对其他选项卡不利... adjust.css放入www文件夹中。基本思想来自这里。

该应用程序也在此链接上。

ui.R

     library(shiny)
    library(leaflet)

    shinyUI(tagList(
            tags$head(
                    HTML("<link rel='stylesheet' type='text/css' href='adjust.css'>"),
                    HTML("<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />")
            ),
            navbarPage(title = "test",
                       collapsible = T,
                       position= "static-top",
                       inverse = T,
                       #####################################
                       # the tab panel that includes the MAP
                       #####################################

                       tabPanel("Map",
                                #tags$div(id="map",     
                                         leafletOutput("mymap")
                                #)
                       ),
                       #####################################
                       # other tab panels
                       #####################################
                       tabPanel("Fri",
                                fluidRow(

                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("freitag",
                                                                          h3("Freitag"),
                                                                          c("1", "2", "3"),
                                                                          selected = 1
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Sat",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("samstag",
                                                                          h3("Samstag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Sun",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("sonntag",
                                                                          h3("Sonntag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Mon",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("montag",
                                                                          h3("Montag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Tues",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("dienstag",
                                                                          h3("Dienstag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       )
            )  
    ))

server.R

    library(shiny)
    library(leaflet)

    shinyServer(function(input, output) {
            output$mymap <- renderLeaflet({
                    points <- cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)

                    leaflet() %>%
                            addProviderTiles("Stamen.TonerLite",
                                             options = providerTileOptions(noWrap = TRUE)
                            ) %>%
                            addMarkers(data = points)
            })
    })

adjust.css

body, .container-fluid {
        padding: 0;
        margin: 0;
    }

    html, body, #mymap {

            height: 100%;
            width: 100%;
    }

- Valter Beaković