引导全屏布局，高度为100％ [英] Bootstrap fullscreen layout with 100% height

问题描述

我想开发一个信息亭应用程序，该应用程序应能将自身扩展到整个触摸屏的100％。

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.

这种情况是否存在浮动布局？

Is there a floating layout for such a case?

这里有一些代码：

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

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

推荐答案

您要做的就是在主容器/包装机上设置100vh的高度，然后进行设置高度为子元素的100％或50％..取决于您要实现的目标。我试图从基本意义上复制您的模型。

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.

如果您想将内容居中放置，请查看flexbox。我给你举一个例子。

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>

这篇关于引导全屏布局，高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！