R-shiny 中的传单：传单地图的 100% 高度

Question

我正在尝试构建一个显示传单地图的应用程序。使用该应用程序的人大多是通过移动设备进行的——因此在整个屏幕上提供地图会很方便。 您可以在此处查看该应用程序：https://js1984.shinyapps.io/stackoverflow/

它适用于 leafletOutput("mymap", width = "100%") 的宽度，但是我无法将高度设置为 leafletOutput("mymap", width = "100%", height = "100%")：当我运行应用程序时地图将消失...将高度设置为固定值可以正常工作，但不是您可以想象的选项。

到目前为止我发现的所有解决方案都不适合我：比如在 CSS 中设置 height: 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
                                 )
                               )
                        )
                      )
             )
)

Answer 1

正如 Dogan Askan（谢谢！）在 this comment 中指出的那样，使用 calc() 和窗口高度的解决方案对我有用。 See this answer 获取更详细的示例。

Answer 2

请参阅此解决方案。它将 css 应用于 container-fluid 类，这可能对其他选项卡不利。...adjust.css 进入 www 文件夹。基本思路取自here

应用也在这个link

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")
                                                       )
                                               )
                                        )
                                )
                       )
            )  
    ))

服务器.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)
            })
    })

调整.css

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

    html, body, #mymap {

            height: 100%;
            width: 100%;
    }