Bootstrap 全屏布局，高度为 100%

Question

我想开发一个自助服务终端应用程序，它应该将自身扩展到 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
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
|--------------------|                  ||
|--------------------|                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
|----------------------------------------|
+----------------------------------------+

不是这样的（在小屏幕上看起来不错的布局现在看起来很短）

 +----------------------------------+
|                                  |
| +------------------------------+ |
| |--------------|               | |
| +--------------|               | |
| |             ||               | |
| +------------------------------+ |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
+----------------------------------+

原文由 EchtFettigerKeks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您所要做的就是在主容器/包装器上设置 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>

原文由 zsawaf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用最新的 Bootstrap 4.0.0 的答案。使用 Bootstrap 4 中提供的 flexbox 和 sizing 实用程序类 可以更轻松地实现此布局。只需 很少 的额外 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 和 vh-100 类包含在 Bootstrap 4.1（及更高版本）中

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议