Bootstrap 4 弹性盒布局

【问题标题】：Bootstrap 4 Flexbox LayoutBootstrap 4 弹性盒布局
【发布时间】：2018-04-21 20:03:36
【问题描述】：

我想用 Bootstrap 创建一个像 Layout Concept 这样的布局。

我尝试以下方法

<div class="h-100">
  <div class="bg-dark text-light d-flex flex-column">Header</div>
  <div class="d-flex flex-column flex-grow">
      <div class="bg-danger text-light w-25">Sidebar</div>
      <div class="w-75">Content</div>
  </div>
  <div class="bg-dark text-light d-flex flex-column">Footer</div>
</div>

Codepen

即使 html 和 body 标签具有 100% 的 height 属性，布局也没有获得完整的高度。

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

它的高度越来越高，但内部元素却没有。你可以这样调整类：

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="h-100 d-flex flex-column">
  <div class="bg-dark text-light p-3">Header</div>
  <div class="d-flex flex-grow-1">
      <div class="bg-danger text-light w-25">Sidebar</div>
      <div class="w-75">Content</div>
  </div>
  <div class="bg-dark text-light p-3">Footer</div>
</div>

【讨论】：