我想开发一个自助服务终端应用程序，应该将自己扩展到完整触摸屏的100％。
当我为每个应用程序视图/模板嵌套行和列时，定义每行和每列以设置拉伸100％或更少（取决于嵌套元素）的高度变得非常复杂。
这种情况是否有浮动布局？
下面是一些代码：
<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>
继承人我想要制作的东西：
+------------------------------+small screen
|-------------+ +------------+ |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|-------------+ | | |
|-------------+ | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|-------------+ +------------+ |
+------------------------------+
+----------------------------------------+
|----------------------------------------|huge screen
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|--------------------| ||
|--------------------| ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|| || ||
|----------------------------------------|
+----------------------------------------+
不是这样的（在小屏幕上看起来很好的布局现在看起来很短）
+----------------------------------+
| |
| +------------------------------+ |
| |--------------| | |
| +--------------| | |
| | || | |
| +------------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------+
答案 0 :(得分：26)
您需要做的就是在主容器/包装器上高度为100vh，然后为子元素设置高度100％或50％..这取决于您要实现的目标。我尝试从基本的意义上复制你的模拟。
如果您想将内容集中在内，请查看flexbox。我为你举了一个例子。
您可以全屏查看，并调整浏览器大小并查看其工作原理。布局保持不变。
.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>
答案 1 :(得分：11)
以下是使用最新 Bootstrap 4.0.0 的答案。使用Bootstrap 4中提供的flexbox and sizing utility classes，这种布局更容易。非常额外的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>
flex-fill类将在Bootstrap 4.1中提供
答案 2 :(得分：2)
<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>答案 3 :(得分：0)
如果没有垂直滚动，那么您可以使用在html和body元素上声明的position:absolute和height:100%。
另一种选择是使用视口高度单位，请参阅Make div 100% height of browser window
绝对位置示例：
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>