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 co

Answer 1

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:

html, body {
height:100%;
position: absolute;
background-color:red;
}
.button{
  height:50%;
  background-color:white;
}

BUTTON

html, body {min-height:100vh;background:gray;
}
.col-100vh {
  height:100vh;
  }
.col-50vh {
  height:50vh;
  }
#mmenu_screen--information{
  background:teal;
}
#mmenu_screen--book{
   background:blue;
}
.mmenu_screen--direktaction{
  background:red;
}

    

        

            
                

                    BOOKING BUTTON
                
           
                

                    INFO BUTTON
                
            
        
        

           DIRECT ACTION BUTTON