r - R-shiny : 100% height of leaflet map 中的传单

Question

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

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

到目前为止我发现的所有解决方案都对我不起作用:比如在 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一个更详细的例子。