如何让垂直b-tabs导航栏与内容区高度一致并动态设置max-height

I get it, you want your vertical Bootstrap Vue tabs' navigation panel to match the height of the content area (using the content's height as the reference), plus be able to dynamically set the nav's max-height from your Vue data. Let's break this down into actionable steps:

Step 1: Make Nav and Content Share the Same Height #

First, we'll leverage flexbox to ensure the navigation and content containers automatically stretch to the same height. Bootstrap Vue's vertical tabs already use a flex container for these elements, but we need to tweak styles to enforce consistent height:

.wrap {
  overflow: hidden;
  flex-direction: row;
}

/* Target the flex container holding nav and content inside b-tabs */
.b-tabs > .d-flex {
  align-items: stretch;
  min-height: 100%;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 500px;
  overflow-y: auto; /* Add vertical scroll when nav items exceed the height */
}

.tab-content {
  flex-grow: 1; /* Let content take remaining width */
}

With this CSS, the nav will automatically match the height of the content area. If the nav has more items than fit into that height, it will show a vertical scrollbar instead of expanding beyond the content's height.

Step 2: Add Dynamic Max-Height from Vue Data #

If you want to set a custom max-height from your Vue data (either from an external source or computed based on content), use the nav-style prop on <b-tabs> to bind dynamic styles directly. This avoids specificity issues that might have blocked your original nav-class approach.

Modified Template: #

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <!-- Bind nav-style to apply dynamic max-height -->
      <b-tabs vertical content-class="mt-3" :nav-style="{ maxHeight: navMaxHeight, overflowY: 'auto' }">
        <b-tab v-for="category in categories" :title="category.name" :key="category.id">
          {{ category.name }} Now the left navigation will match this content's height (or your custom max-height)!
        </b-tab>
        <b-tab> Additional Content </b-tab>
      </b-tabs>
    </div>
  </div>
</div>

Modified Vue Instance: #

new Vue({
  el: "#app",
  data: {
    categories: [
      { name: "1" },
      { name: "2" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" }
    ],
    // Set your custom max-height here, or compute it from content
    navMaxHeight: 'auto' // Default to auto, which uses content height
  },
  mounted() {
    // Optional: Compute max-height from content area on load
    const contentEl = this.$el.querySelector('.tab-content');
    if (contentEl) {
      this.navMaxHeight = `${contentEl.offsetHeight}px`;
    }

    // Optional: Update on window resize to handle responsive changes
    window.addEventListener('resize', () => {
      const contentEl = this.$el.querySelector('.tab-content');
      if (contentEl) {
        this.navMaxHeight = `${contentEl.offsetHeight}px`;
      }
    });
  }
})

How It Works: #

• The nav-style prop binds inline styles directly to the navigation panel, which avoids specificity conflicts with Bootstrap's default styles.
• You can set navMaxHeight to any static value (like '400px') from your data, or compute it dynamically based on the content's height as shown in the mounted hook.
• overflowY: 'auto' ensures the nav gets a scrollbar when items exceed the set max-height.

Why Your Original nav-class Approach Might Have Failed #

If you tried using nav-class to apply max-height, it likely failed due to CSS specificity—Bootstrap's default .nav-tabs styles have higher priority than a custom class. Using inline styles via nav-style bypasses this, or you could have increased your class specificity (e.g., .wrap .nav-tabs instead of just .nav-tabs).

内容的提问来源于stack exchange，提问作者Cheong Gwen Yit