css - 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:

<div id="mmenu_screen" class="container-fluid main_container">

    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-12" id="mmenu_screen--book">
                    <!-- Button for booking -->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="mmenu_screen--information">
                    <!-- Button for information -->
                </div>
            </div>
        </div>
        <div class="col-sm-6 mmenu_screen--direktaction">
            <!-- Button for direktaction -->
        </div>
    </div>

</div>

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)

+----------------------------------+
|                                  |
| +------------------------------+ |
| |--------------|               | |
| +--------------|               | |
| |             ||               | |
| +------------------------------+ |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
+----------------------------------+

question from:https://stackoverflow.com/questions/41448221/bootstrap-fullscreen-layout-with-100-height

Answer 1

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.

.left {
  background: grey;  
}

.right {
  background: black;  
}

.main-wrapper {
  height: 100vh;  
}

.section {
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.half {
  background: #f9f9f9;
  height: 50%;  
  width: 100%;
  margin: 15px 0;
}

h4 {
  color: white;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="main-wrapper">
  <div class="section left col-xs-3">
    <div class="half"><h4>Top left</h4></div>
    <div class="half"><h4>Bottom left</h4></div>
  </div>
  <div class="section right col-xs-9">
    <h4>Extra step: center stuff here</h4>
  </div>
</div>