How to set a dynamic fluidRow height in Shiny

Question

I'm trying to create a page with two rows, where the height of each row is a certain percentage of the window height (say 40 and 60%). Whereas the width of elements can be easily controlled with the use of columns, I can't seem to find a similar solution for height.

Here is a little example app:

library(shiny)
ui <- navbarPage('', 
  tabPanel("page 1", 
           fluidPage(
             fluidRow(
               style='height:400px',
               column(7, "text"),
               column(5, "other text")),
             fluidRow('some more text'))
  ),
  tabPanel("page 2"),
  tabPanel("page 3")
)
server <- function(input, output){}
shinyApp(ui=ui, server=server)

The columns nicely adjust when changing the width of the window. The row height is set here to 400 pixels, but I'd like it to be 40% of the window height. All solutions that I found so far involve setting fixed heights.

Answer 1

Use the argument vh (1 vh is 1% of the height of the viewport). So if you change the height of the window the height of the fluidRow is also adapted.

You can find other CSS units here.

fluidRow(style='height:40vh')