计算元素高度的最佳方法是什么

Question

我将 Bootstrap Vue table 与 Vue v2 结合使用，目前使用 prop (

sticky-header="600px"

) 来设置表格高度：

<page-wrapper>
   <page-header> </page-header>
   <div class="content">
      <b-card>
         <b-row>
            <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 class="text-left border-left multiple-headers" small sticky-header="600px" 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>

但是对于更大的屏幕来说它看起来不太好，因为底部有很多间距，这就是为什么我想将桌子高度设置为与屏幕高度相关。测量所有屏幕尺寸的表格主体外部（向上和向下）应有多少空间，然后使用 calc(100vh - XXpx) 的最佳方法是什么？

Answer 1

在您的组件中，您可以使用 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 规则添加滚动条。这是可选的。