css - 设置 sidebarPanel 高度等于 mainPanel 内容的高度

Question

我正在开发一个带有可滚动侧边栏面板的应用程序，其中主面板的高度可以变化，例如:

library(shiny)

ui <- fluidPage(
  headerPanel('Iris k-means clustering'),
  sidebarPanel(style = "overflow-y:scroll; max-height: 600px; position:relative;",
               numericInput('clusters', 'Cluster count', 3, min = 1, max = 9),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('xcol', 'X Variable', names(iris)),
               selectInput('ycol', 'Y Variable', names(iris),
                           selected = names(iris)[[2]])
              
  ),
  mainPanel(
    plotOutput('plot1'),
    conditionalPanel("input.clusters == 2", 
                     plotOutput('plot2') 
    )
  )
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    plot(x=iris$Sepal.Length, iris$Sepal.Width,
         col = iris$Species, pch = 20, cex = 3)
  })
  
  output$plot2 <- renderPlot({
    plot(x=iris$Petal.Length, iris$Petal.Width,
         col = iris$Species, pch = 20, cex = 3)
  })
  
}

shinyApp(ui = ui, server = server)

如果 cluster == 2，mainPanel 的高度会改变。有没有办法让侧边栏的高度自动匹配 mainPanel 输出的高度？这样 sidebarPanel 总是会移动到页面底部，但仍然会滚动。

我认为这与 max-height css 参数有关，但不确定从那里去哪里。

谢谢!

Answer 1

如您所说，它与max-height 参数有关。您可以使用相对单位来定义该参数。我的回答基于这两个:

• sizing div based on window width
• CSS Units - What is the difference between vh/vw and %?

您可以设置 max-height: 100% 以使用相对于父 div 元素的 100% 单位的高度，或者您可以设置 max- height: 100vh 使用相对于 viewport h八(浏览器窗口)的 100% 单位。当然，您可以使用不同于 100 的数字来定义参数。

我发现 90vh 在您的应用中看起来不错。