我正在尝试构建一个显示传单地图的应用程序。那些使用该应用程序的人主要是通过移动设备进行操作 - 因此在整个屏幕上提供地图会很方便。 您可以在此处查看该应用：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
)
)
)
)
)
)
答案 0 :(得分：1)
正如Dogan Askan所指出的那样（谢谢！）this comment使用calc（）的解决方案，窗口高度适合我。 See this answer有更详细的例子。
答案 1 :(得分：0)
请参阅此解决方案。它将css应用于容器流体类，这可能是其他选项卡的缺点.... 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")
)
)
)
)
)
)
))
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%;
}