Bootstrap - Vue选项卡：强制选项卡内容填充父级的剩余高度答案

【问题标题】：Bootstrap - Vue Tabs: Force tab-content to fill remaining height of parentBootstrap - Vue选项卡：强制选项卡内容填充父级的剩余高度
【发布时间】：2021-05-26 13:15:29
【问题描述】：

我的页面中有一个标签组件 (b-tabs)。组件被包裹在具有特定高度的父 div 中。

我希望标签的内容获得父组件的全部剩余高度。

这是我的标签的基本骨架，没什么特别的：

<div class="h-100">
    <b-tabs content-class="mt-3 h-100">
        <b-tab title="First" active>
            <div class="tab-content">I'm the first tab</div>
        </b-tab>
        <b-tab title="Second">
            <div class="tab-content">I'm the second tab</div>
        </b-tab>
        <b-tab title="Third">
            <div class="tab-content">I'm the third tab!</div>
        </b-tab>
    </b-tabs>
</div>

检查 DOM 后，我尝试将 height: 100% 设置为以下类：

.tabs, .tab-pane, .tab-content, .my-tab-content {
    height: 100%;
}

这会导致内容溢出，因为它与标签栏是同级的（因此，它获得 100% 的父容器并且溢出等于标签栏的高度）。

我曾想过计算标签栏的高度并使用height: calc(100% - **px) 设置内容的高度，但我想可能有更优雅的解决方案。

检查代码框： https://codesandbox.io/s/optimistic-thunder-nwmzu

【问题讨论】：

标签： css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

我建议在选项卡上使用display: flex，然后使用flex-grow-1 utility class，这将填满弹性容器内的所有剩余空间。

new Vue({
  el: '#app'
})

.tabs-container {
  height: 400px;
  background: #d8d8d8;
}

.tab-pane {
  height: 100%;
}

.my-tab-content {
  min-height: 100%;
  background: rgba(80, 10, 10, 0.5);
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-3">
  <div class="tabs-container">
    <b-tabs class="h-100 d-flex flex-column" content-class="mt-3 flex-grow-1">
      <b-tab title="First" active>
        <div class="my-tab-content">
          See at the bottom: The content of tabs overflows container
        </div>
      </b-tab>
      <b-tab title="Second">
        <div class="my-tab-content">I'm the second tab</div>
      </b-tab>
      <b-tab title="Third">
        <div class="my-tab-content">I'm the third tab!</div>
      </b-tab>
    </b-tabs>
  </div>
</div>

【讨论】：