CSS 具有 100% 高度的 Bootstrap 全屏布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41448221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap fullscreen layout with 100% height
提问by Marc M
I want to develop a kiosk-app which should stretch itself to 100% of the complete touch-screen.
我想开发一个自助服务终端应用程序，它应该可以将自己扩展到 100% 的完整触摸屏。
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.
当我为每个应用程序视图/模板嵌套行和列时，定义每一行和每一列以将高度设置为 100% 或更少（取决于嵌套元素）变得非常复杂。
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)
不是这样的（在小屏幕上看起来不错的布局现在看起来很短）
+----------------------------------+
| |
| +------------------------------+ |
| |--------------| | |
| +--------------| | |
| | || | |
| +------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------+
回答by zsawaf
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.
您所要做的就是在主容器/包装器上设置 100vh 的高度，然后将子元素的高度设置为 100% 或 50% ..取决于您要实现的目标。我试图从基本意义上复制你的模型。
In case you want to center stuff within, look into flexbox. I put in an example for you.
如果您想将内容居中，请查看 flexbox。我给你举了个例子。
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>回答by Zim
Here's an answer using the latest Bootstrap 4.0.0. This layout is easier using the flexbox and sizing utility classesthat are all provided in Bootstrap 4. This layout is possible with verylittle extra CSS.
这是使用最新Bootstrap 4.0.0的答案。这种布局更容易使用Flexbox的大小和实用工具类在引导4.这种布局可以与所有提供非常一点额外的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-fillclass will be available in Bootstrap 4.1
该flex-fill课程将在引导4.1可用
回答by Seb Cooper
If there is no vertical scrolling then you can use position:absoluteand height:100%declared on html and body elements.
如果没有垂直滚动，那么您可以在 html 和 body 元素上使用position:absolute和height:100%声明。
Another option is to use viewport height units, see Make div 100% height of browser window
另一种选择是使用视口高度单位，请参阅使浏览器窗口的 div 高度为 100%
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>