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

Question

我的页面中有一个选项卡组件 (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

Answer 1

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

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>

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

Bootstrap - Vue Tabs: Force tab-content to fill remaining height of parent

css

vue.js

bootstrap-4

bootstrap-vue