将Bootstrap 4 div分为2部分

Question

在我跳入响应式设计之前，我正在尝试完成像素世界中的直截了当。我正在使用bootstrap 4并且想要一个非常简单的布局。它由

组成

navbar
   main container-fluid div
      div using 85% of main div
      div using 15% of main div

我发现很多例子说明这是多么简单，但它对我不起作用。这是我的HTML：

<div class="container-fluid h-100 d-flex flex-col" id="mainWindow" >

    <!-- div container for the map. -->
    <div class="row h-75" style="background-color: yellow;">
            map<br>
    </div>
    <div class="row h-25" style="background-color: green;">
            chat<br>
    </div>

</div> <!-- mainWindow -->

但我看到的是

navbar

没有黄色div和绿色div的一小部分

我缺少什么？

Answer 1

这是你想要的吗？

html,
body {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid d-flex h-100 flex-column">
  <div class="row h-75" style="background-color: yellow;">
    <div class="col-12">map</div>
  </div>
  <div class="row h-25" style="background-color: green;">
    <div class="col-12">chat</div>
  </div>
</div>