Bootstrap 4，如何在“无滚动”的情况下在 SPA 上获得响应高度？答案

【问题标题】：Bootstrap 4, how to get responsive height on SPA with "no scroll"?Bootstrap 4，如何在“无滚动”的情况下在 SPA 上获得响应高度？
【发布时间】：2019-04-01 03:36:03
【问题描述】：

我对响应式网站设计非常陌生（通常是前端开发），我正在尝试创建一个基本的小角度聊天应用程序，使用引导程序，在整个设计过程中都考虑到响应性。然而，当我开始嵌套弹性盒子时，我遇到了很多问题，我想我只是不完全理解它。理想情况下，这些是我在更大或更小的设备上的看法。

大：

小型设备（注意我没有做任何事情来将设置更改为按钮）：

这是我在使用 h-100 时得到的现实（我没有看到任何内置的高度响应类，但我可能完全错了）：

我认为我理解这个问题，我正在使用带有 col-12 的 h-100，所以左侧占据了整个房间，而右侧则被分流到页面之外。我尝试使用 flex-fill 和 flex-grow-1 获得相同的外观，但它们似乎对实际文档没有任何作用。这是我的代码：

<app-header></app-header>
<div class="container-fluid" id="mainContent">
    <div class="row h-100 flex-column-reverse flex-md-row">
      <div class="col-md-3 col-12 flex-fill">
        <div class="d-flex flex-column h-100 justify-content-between">
          <div>
              <app-channels></app-channels>
          </div>
          <div>
              <app-settings></app-settings>
          </div>
        </div>
      </div>
      <div class="col-md-9 col-12">
        <app-messages></app-messages>
      </div>
    </div>
</div>

（app-messages 也使用 h-100 填充屏幕）

自定义scss：

@import "../node_modules/bootstrap/scss/bootstrap";

html, body {
    height: 100% !important;
    width: 100% !important;
}

有没有办法让这个内容在我上面发布的视图之间切换，纯粹是使用 flexbox 而不是使用 h-100？或者是否有响应类，例如 h-sm-100，以便它只在 small 和 above 上使用 100% 的高度？

感谢您的宝贵时间。

【问题讨论】：

标签： html css angular flexbox bootstrap-4

【解决方案1】：

对于身高，您可能必须自己动手……这并不像您在this Angular demo 中看到的那么复杂

以下代码有助于生成您需要的内容..

CSS部分：

.outsideDiv{ overflow-y:hidden;}
.app-header { height:10vh; background:#000; color:#fff;}
.myHeight{  background: lightgray; }
.mySection{padding:0; }

.app-messages {  background: #c7b6c7;}
.createMessage{background: lightyellow; margin: 1%; position: absolute; bottom: 0px; width: 98%; }
.app-settings {  background:blue; }
.app-channels {  background:#b3fbfb;}

@media SCREEN AND (min-width: 768px){
  .myHeight{ height:90vh;  }
  .app-channels { height: 80%; }
  .app-messages { height: 100%; }
  .app-settings { height: 20%;  }
}
@media SCREEN AND (max-width: 767px){
  .myHeight{ height:auto;  }
  .myHeightSection1 { height:20vh;}
  .myHeightSection2 { height:70vh;}
  .app-channels { height: 100% }
  .app-messages { height: 100%; }
  .app-settings { height: 5%;  width:20%; position:fixed; right:0; bottom:0; }
}

HTML部分：

<div class='outsideDiv'>

    <div class="app-header">
        <app-header>
        </app-header>
    </div>
    <div class="container-fluid" id="mainContent">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-12 d-flex flex-column mySection">
                <div class="d-flex flex-column h-100 justify-content-between order-last">
                    <div class='myHeight myHeightSection1'>
                        <div class="app-channels">
                            <app-channels></app-channels>
                        </div>
                        <div class="app-settings">
                            <app-settings></app-settings>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-12 col-12 order-first order-lg-2 order-md-2 mySection">
                <div class='myHeight myHeightSection2'>
                    <div class="app-messages">
                        <app-messages></app-messages>
                        <div class='createMessage'>Create Message</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

【讨论】：