Bootstrap fullscreen layout with 100% height
CssTwitter BootstrapCss Problem Overview
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)
+----------------------------------+
| |
| +------------------------------+ |
| |--------------| | |
| +--------------| | |
| | || | |
| +------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------+
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
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>
The flex-fill and vh-100 classes are included in Bootstrap 4.1 (and later)
Solution 3 - Css
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
Solution 4 - Css
<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>
Solution 5 - Css
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 https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window/16837667#16837667
Absolute position Example:
html, body {
height:100%;
position: absolute;
background-color:red;
}
.button{
height:50%;
background-color:white;
}
<div class="button">BUTTON</div>
VH based option using custom .col-<vh> classes.
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>