R-shiny的小叶:小册子地图的100%高度

Question

我正在尝试构建一个显示传单地图的应用程序.那些使用该应用程序的人主要是通过移动设备进行操作 - 因此在整个屏幕上提供地图会很方便.你可以在这里看到这个应用程序: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
                                 )
                               )
                        )
                      )
             )
)

Answer 1

正如 Dogan Askan（谢谢！）在这篇评论中指出的那样，使用 calc() 和窗口高度的解决方案对我有用。有关更详细的示例，请参阅此答案。