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?
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)
+----------------------------------+
| |
| +------------------------------+ |
| |--------------| | |
| +--------------| | |
| | || | |
| +------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------+
This question is related to
css
twitter-bootstrap
<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>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 {_x000D_
height:100%;_x000D_
position: absolute;_x000D_
background-color:red;_x000D_
}_x000D_
.button{_x000D_
height:50%;_x000D_
background-color:white;_x000D_
}<div class="button">BUTTON</div>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_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div id="mmenu_screen" class="col-100vh container-fluid main_container">_x000D_
_x000D_
<div class="row col-100vh">_x000D_
<div class="col-xs-6 col-100vh">_x000D_
_x000D_
<div class="col-50vh col-xs-12" id="mmenu_screen--book">_x000D_
BOOKING BUTTON_x000D_
</div>_x000D_
_x000D_
<div class="col-50vh col-xs-12" id="mmenu_screen--information">_x000D_
INFO BUTTON_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
<div class="col-100vh col-xs-6 mmenu_screen--direktaction">_x000D_
DIRECT ACTION BUTTON_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
</div>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)
Source: Stackoverflow.com