Bootstrap fullscreen layout with 100 height

Question

I want to develop a kiosk-app which should stretch itself to 100  of the complete touch-screen    When I m nesting for each application-view template the rows and cols  it becomes horrible complicated to define every row and every column to set stretch 100  or less  depending on the nested element  in height   Is there a floating layout for such a case   EDIT  Heres some code    lt div id  mmenu screen  class  container-fluid main container  gt        lt div class  row  gt           lt div class  col-sm-6  gt               lt div class  row  gt                   lt div class  col-sm-12  id  mmenu screen--book  gt                       lt  -- Button for booking -- gt                   lt  div gt               lt  div gt               lt div class  row  gt                   lt div class  col-sm-12  id  mmenu screen--information  gt                       lt  -- Button for information -- gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col-sm-6 mmenu screen--direktaction  gt               lt  -- Button for direktaction -- gt           lt  div gt       lt  div gt    lt  div gt    Heres what I want to produce    ------------------------------ small screen  -------------   ------------                                                                                                                                         -------------                    -------------                                                                                                                                                        -------------   ------------     ------------------------------    ----------------------------------------   ---------------------------------------- huge screen                                                                                                                                                                                                                                                                                                               --------------------                       --------------------                                                                                                                                                                                                                                                                                         ----------------------------------------   ----------------------------------------    Not something like this  the layout which was looking good on a small screen is now looking to short    ----------------------------------                                          ------------------------------       --------------                       --------------                                                            ------------------------------                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ----------------------------------

User · Answer

Here s an answer using the latest Bootstrap 4 0 0  This layout is easier using the flexbox and sizing utility classes that are all provided in Bootstrap 4  This layout is possible with very little extra CSS   mmenu screen  gt   row       min-height  100vh      flex-fill       flex 1 1 auto      lt div id  quot mmenu screen quot  class  quot container-fluid main container d-flex quot  gt       lt div class  quot row flex-fill quot  gt           lt div class  quot col-sm-6 h-100 quot  gt               lt div class  quot row h-50 quot  gt                   lt div class  quot col-sm-12 quot  id  quot mmenu screen--book quot  gt                       lt  -- Button for booking -- gt                      Booking                  lt  div gt               lt  div gt               lt div class  quot row h-50 quot  gt                   lt div class  quot col-sm-12 quot  id  quot mmenu screen--information quot  gt                       lt  -- Button for information -- gt                      Info                  lt  div gt               lt  div gt           lt  div gt           lt div class  quot col-sm-6 mmenu screen--direktaction flex-fill quot  gt               lt  -- Button for direktaction -- gt              Action          lt  div gt       lt  div gt   lt  div gt   Demo The flex-fill and vh-100 classes are included in Bootstrap 4 1  and later

User · Answer

All you have to do is have a height of 100vh on your main container wrapper  and then set height 100  or 50  for child elements   depending on what you re trying to achieve  I tried to copy your mock up in a basic sense    In case you want to center stuff within  look into flexbox  I put in an example for you    You can view it on full screen  and resize the browser and see how it works  The layout stays the same     x000D   x000D   left   x000D    background  grey    x000D    x000D   x000D   right   x000D    background  black    x000D    x000D   x000D   main-wrapper   x000D    height  100vh    x000D    x000D   x000D   section   x000D    height  100     x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    align-items  center  x000D    x000D   x000D   half   x000D    background   f9f9f9  x000D    height  50     x000D    width  100   x000D    margin  15px 0  x000D    x000D   x000D  h4   x000D    color  white    x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt div class  main-wrapper  gt  x000D     lt div class  section left col-xs-3  gt  x000D       lt div class  half  gt  lt h4 gt Top left lt  h4 gt  lt  div gt  x000D       lt div class  half  gt  lt h4 gt Bottom left lt  h4 gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  section right col-xs-9  gt  x000D       lt h4 gt Extra step  center stuff here lt  h4 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If there is no vertical scrolling then you can use position absolute and height 100  declared on html and body elements    Another option is to use viewport height units  see Make div 100  height of browser window  Absolute position Example    x000D   x000D  html  body   x000D  height 100   x000D  position  absolute  x000D  background-color red  x000D    x000D   button  x000D    height 50   x000D    background-color white  x000D    x000D   lt div class  button  gt BUTTON lt  div gt  x000D   x000D   x000D     x000D   x000D  html  body  min-height 100vh background gray  x000D    x000D   col-100vh   x000D    height 100vh  x000D      x000D   col-50vh   x000D    height 50vh  x000D      x000D   mmenu screen--information  x000D    background teal  x000D    x000D   mmenu screen--book  x000D     background blue  x000D    x000D   mmenu screen--direktaction  x000D    background red  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt div id  mmenu screen  class  col-100vh container-fluid main container  gt  x000D   x000D       lt div class  row col-100vh  gt  x000D           lt div class  col-xs-6 col-100vh  gt  x000D               x000D                   lt div class  col-50vh col-xs-12  id  mmenu screen--book  gt  x000D                      BOOKING BUTTON x000D                   lt  div gt  x000D              x000D                   lt div class  col-50vh col-xs-12  id  mmenu screen--information  gt  x000D                      INFO BUTTON x000D                   lt  div gt  x000D               x000D           lt  div gt  x000D           lt div class  col-100vh col-xs-6 mmenu screen--direktaction  gt  x000D             DIRECT ACTION BUTTON x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt section class  min-vh-100 d-flex align-items-center justify-content-center py-3  gt     lt div class  container  gt       lt div class  row justify-content-between align-items-center  gt      x     x     x      lt  div gt     lt  div gt   lt  section gt  x000D   x000D   x000D

[css] Bootstrap fullscreen layout with 100% height

Examples related to css

Examples related to twitter-bootstrap