在你的组件中，你可以根据屏幕高度和你想要计算的任何额外空间来计算高度，通过使用JS和为.table-container添加样式来确保它采用完整的计算高度。

.table-container {
  height: 100%;
  overflow: auto; /* Add this if you want scrolling when the content is too large */
}

<template>
  <!-- ... your existing template ... -->
  <div class="table-container">
    <b-table-simple
      class="text-left border-left multiple-headers"
      small
      :sticky-header="dynamicTableHeight"
      bordered
      no-border-collapse
    >
      <!-- ... your table content ... -->
    </b-table-simple>
  </div>
</template>

<script>
export default {
  data() {
    return {
      additionalSpace: 100, // Adjust this value based on your design
    };
  },
  computed: {
    dynamicTableHeight() {
      // Calculate the dynamic height based on screen height
      const screenHeight = window.innerHeight || document.documentElement.clientHeight;
      return `calc(${screenHeight}px - ${this.additionalSpace}px)`;
    },
  },
};
</script>

通过这样做，每当窗口调整大小时，表格将根据屏幕高度呈现动态高度，并且dynamicTableHeight属性将相应地更新。根据您的首选设计，更改additionalSpace值。overflow: auto; CSS规则可用于在表格内容超过估计高度时添加滚动条。它是可选的。

我找到了一个适合我的解决方案。我得到页面上元素的高度（除了表格），然后对它们的大小求和，并使用这个数据变量从100vh中减去它：
模板：

<page-wrapper>
   <page-header class="space-1"> </page-header>
   <div class="content">
      <b-card>
         <b-row ref="barButtons">
            <b-col></b-col>
            <b-col>
               <b-form-group>
                  <b-form-radio-group></b-form-radio-group>
               </b-form-group>
            </b-col>

            <b-col></b-col>
        </b-row>
          
        <div class="table-responsive">
           <b-table-simple 
              small 
              sticky-header="`calc(100vh - ${heightTable}px)`" 
              bordered 
              no-border-collapse>
              <b-thead head-variant="light">
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
              </b-thead>
              <b-tbody>
                 <b-tr>
                    <b-td> </b-td>
                 </b-tr>
              </b-tbody>
           </b-table-simple>
        </div>
     </b-overlay>
  </b-card>
</div>
</page-wrapper>

脚本：

data(){
  heightIndex: String
},
mounted() {
    this.setHeight()
},

methods: {
    setHeight(){
      let spaceHeight = document.getElementsByClassName('space-1')[0].clientHeight;
      let barButtonsHeight = this.$refs.barButtons.clientHeight;
      this.heightIndex = spaceHeight + navbarHeight + barButtonsHeight + 150;
    }
}