在Bootstrap 4中将div高度设置为超过视口的100％

Question

我有以下标记：

{
  "name": "paddlr",
  "description": "ping pong brilliance",
  "main": "backend/index.js",
  "engines": {
    "node": "8.12.0"
  },
  "scripts": {
    "client": "cd frontend && npm start",
    "dev": "concurrently --kill-others-on-fail \"npm server\" \"npm client\"",
    "dev:server": "cd frontend && npm build && cd .. && npm start",
    "start": "node backend/index.js",
    "heroku-postbuild": "cd backend && npm install && cd ../frontend && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },
  "dependencies": {
    "concurrently": "^4.0.1",
    "node-fetch": "^2.2.0"
  }
}

这是我拥有的CSS：

<div id="app-container" class="row h-100 main-content">
  <div class="col-md-4 order-mb-1 sidebar">
    <ul class="mb-3 sidebar-list">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <main role="main" class="col-md order-md-2 h-100 pl-4 pr-4 pt-3 pb-2">
    <div class="row align-items-center">
      <div class="col">
        <h1>Page Title </h1>
      </div>
    </div>
    <hr>
    <div id="text">Sometimes large amounts of text</div>    
  </main>
</div>

我的问题是，如果html, body { height: 100%; } .sidebar { border-right: 1px solid #ccc; padding-right: 0; padding-left: 0; max-width: 375px; } 的内容跨度超过当前视口，则#text的高度不会达到100％的高度，而是会坚持视口的高度。另外请注意，即使内容很短，我也希望它是100％（因此应该始终是100％）。

我希望这是有道理的。

这是我为说明问题而设置的示例（向下滚动通过视口以查看问题）。

https://codepen.io/anon/pen/ZMZYQY?editors=1100#0

任何帮助将不胜感激。