Bootstrap 全屏布局，高度为 100%答案

【问题标题】：Bootstrap fullscreen layout with 100% heightBootstrap 全屏布局，高度为 100%
【发布时间】：2017-05-17 19:45:35
【问题描述】：

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

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

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

【问题讨论】：

我不知道我是否正确理解了您的问题。回顾一下，您的网络应用中有不同的部分，您希望每个部分都拉伸到视口高度的 100%？
发布一些代码也许我们可以帮助您弄清楚它还提供您的信息亭屏幕的最终分辨率，您不想允许滚动吗？也许flexbox 更合适
显示代码，否则我们帮不了你。
实际上我想添加一堆具有相对高度的元素（按钮等），这样布局就可以在整个屏幕上伸展而无需 - 所以某种负责任但总是看起来一样而不是重新排列每个屏幕（无论屏幕有多大，放置在页面左上角的 50% 高度和 50% 宽度的按钮应始终占据显示器的四分之一）。我将添加一些代码...

标签： css twitter-bootstrap

【解决方案1】：

如果没有垂直滚动，那么您可以使用在 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;
}

&lt;div class="button"&gt;BUTTON&lt;/div&gt;

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>

【讨论】：

这在 IMO 中不起作用，因为所有的行和列仍然很小。即使我在每一行或每一列上声明了一个特定的高度（这对于具有大量嵌套元素的更复杂的模板来说是很多工作）我必须在每个模板上都这样做
您似乎需要开发一个像 Bootstrap 的水平网格系统一样的垂直网格系统以简化开发。
更新了 VH 示例。

【解决方案2】：

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

【讨论】：

很好的答案...我只需要那个 100vh

【解决方案3】：

这是使用最新 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>

Demo

flex-fill 和 vh-100 类包含在 Bootstrap 4.1（及更高版本）中

【讨论】：

工作非常适合我 :::::)))))

【解决方案4】：

<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>

【讨论】：

请添加一些有关您的解决方案的详细信息，只是代码无法帮助找出问题所在。

【解决方案5】：

2021 年 9 月 您可以将根 div 设置为适合 100% 的视口，例如，将其子级设置为 predefineds : 10,25,50,75%

    <div class="vh-100">
       <div class="h-50" >
       </div>
    </div>

谈Bootstrap 4,5

【讨论】：