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)

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

I don't know if I understand your question properly. To recap, you have different sections in your web app, and you want each section to stretch to 100% of the viewport height? — zsawaf, Jan 03 '17 at 16:48
post some code maybe we can help you figure it out also provide the final resolution of your kiosk screen, do you not want to allow scrolling? Maybe a [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) is more suited — happymacarts, Jan 03 '17 at 16:50
Actually I want to add a bunch of elements (buttons, etc.) with a relative height so the layout can stretch over the whole screen without - so some kind of responible but alway looking the same and not rearanging for each screen (a button with 50% height and 50% width placed in top-left on the page should alway take one quarter of the monitor no matter how big the screen is). I will add some code ... — EchtFettigerKeks, Jan 03 '17 at 16:53

zsawaf · Accepted Answer · 2017-01-03T18:19:19.693

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>

Carol Skelly · Answer 2 · 2020-11-11T13:30:27.247

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 > .row {
    min-height: 100vh;
}

.flex-fill {
    flex:1 1 auto;
}

<div id="mmenu_screen" class="container-fluid main_container d-flex">
    <div class="row flex-fill">
        <div class="col-sm-6 h-100">
            <div class="row h-50">
                <div class="col-sm-12" id="mmenu_screen--book">
                    <!-- Button for booking -->
                    Booking
                </div>
            </div>
            <div class="row h-50">
                <div class="col-sm-12" id="mmenu_screen--information">
                    <!-- Button for information -->
                    Info
                </div>
            </div>
        </div>
        <div class="col-sm-6 mmenu_screen--direktaction flex-fill">
            <!-- Button for direktaction -->
            Action
        </div>
    </div>
</div>

Demo

The flex-fill and vh-100 classes are included in Bootstrap 4.1 (and later)

this is good solution but one adjustment. use 100svh instead of 10vh, avoid scroll on mobile — sam kh, Jun 24 '23 at 13:38

CodeToLife · Answer 3 · 2021-09-10T20:20:29.407

8

2021 Sep You can set root div to viewport fit 100% as well as, say, its child to predefineds : 10,25,50,75%

    <div class="vh-100">
       <div class="h-50" >
       </div>
    </div>

Talking about Bootstraps 4,5

edited Sep 10 '21 at 20:20

answered Sep 10 '21 at 19:52

CodeToLife

3,672
2
41
29

score 2 · Answer 4 · edited May 23 '17 at 11:45

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;
}

<div class="button">BUTTON</div>

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mmenu_screen" class="col-100vh container-fluid main_container">

    <div class="row col-100vh">
        <div class="col-xs-6 col-100vh">
            
                <div class="col-50vh col-xs-12" id="mmenu_screen--book">
                    BOOKING BUTTON
                </div>
           
                <div class="col-50vh col-xs-12" id="mmenu_screen--information">
                    INFO BUTTON
                </div>
            
        </div>
        <div class="col-100vh col-xs-6 mmenu_screen--direktaction">
           DIRECT ACTION BUTTON
        </div>
    </div>

</div>

this cant work IMO because all the rows and cols are still to small. Even if I declare on each row or col a specific height (which is a lot of work for a more complex template with lots of nested elements) I would have to do this on each template though — EchtFettigerKeks, Jan 03 '17 at 17:10
It seems likely that you need to develop a vertical grid system like Bootstrap's horizontal one in order to simplify the development. — Seb Cooper, Jan 03 '17 at 17:14

score 1 · Answer 5 · answered Dec 26 '20 at 08:01

1

<section class="min-vh-100 d-flex align-items-center justify-content-center py-3">
  <div class="container">
    <div class="row justify-content-between align-items-center">
    x
    x
    x
    </div>
  </div>
</section>

answered Dec 26 '20 at 08:01

user14890884

19
2

2

please add some details about your solution, just code can not help to find out what is the problem. – Reza sh Dec 26 '20 at 08:12

Bootstrap fullscreen layout with 100% height

EDIT

5 Answers5

Linked

Related