What is the best way to calculate the height of element

Question

I use Bootstrap Vue table with Vue v2 and I currently use a prop (sticky-header="600px") to set the table height:

<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>

But it doesn't look good for bigger screens because there's a lot of spacing at the bottom and that's why I would like to set the table height to be related to screen height. What is the best way to measure how much space there should be outside of the table body (up and down) for all screen sizes, and then use calc(100vh - XXpx)?

Answer 1

I found a solution that works for me. I get the height of the elements that are on the page (except the table) and then sum their sizes and use this data variable to subtract it from 100vh:

template:

<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>

script:

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;
    }
}