Menu
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)
+----------------------------------+ | | | +------------------------------+ | | |--------------| | | | +--------------| | | | | || | | | +------------------------------+ | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +----------------------------------+ 
938
Containers. Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).
Use the . container-fluid class in Bootstrap to set a container that spans the full width of the screen.
height:100vh When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
