How to apply fixed-header prop to v-table if height of 100vh is not possible? – CSS

You’ll have to compute the table height anyway. One way is to substract the alert height from the container height. What is left is the table height.

<template>
  <v-app>
    <v-main ref="maincontainer">
      <v-alert ref="alert" type="info" title="some other content goes here" />
      <v-table :fixed-header="true" :height="height">
        <thead>
          <tr>
            <th>Header</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in 100">
            <td>x</td>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>
</template>

<script>
import {ref, onMounted} from "vue"
export default {
  setup(){
    let maincontainer = ref(null)
    let alert = ref(null)
    let height = ref('500px')
    
    onMounted(() => {
      let mainHeight = maincontainer.value.$el.clientHeight
      let alertHeight = alert.value.$el.clientHeight
      height.value = `${mainHeight - alertHeight}px`
    })
    
    return {
      maincontainer,
      alert,
      height
    }
  }
}
</script>

Fixed reproduction link

UPDATE:

For a more generic solution (independent of the intermediate elements between the table and the container) you can get the position of the table into the viewport (using getBoundingClientRect) and calculate the top and bottom offsets, then subtract them from the viewport height. This way you don’t care about what elements are above or below the table but only about the space that they require.

Note: For this solution to work, initially the table should not have a fixed height (or 100% height).

UPDATE:

Refactored the solution to allow recomputing the table height on demand.

The main points to consider: using a computed is not applicable for this situation because the css props are not reactive in Vue. Instead make the computing in a dedicated function and call it when needed (you can trigger it even from a window resize watcher).

Used the OP setup for a more focused solution.

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from "vue";
import TheAlert from "./TheAlert.vue";

const props = defineProps<{ mainContainer: VMain }>();

const tableComponent = ref<VTable>();
const values = ref([]);

const tableHeight = ref(null)
  
const refreshTableHeight = async () => {
  if (!tableComponent.value) {
   tableHeight.value = null;
  }
  // Unset table height and wait for it to rerender
  tableHeight.value = null
  await nextTick()
  
  // Recompute the table height with new data
  const mainRectangle = props.mainContainer.$el.getBoundingClientRect();
  const tableRectangle = tableComponent.value.$el.getBoundingClientRect();

  const topOffset = tableRectangle.top;
  const bottomOffset = mainRectangle.bottom - tableRectangle.bottom;

  tableHeight.value = window.innerHeight - bottomOffset - topOffset;

}

function insertNewRow() {
  values.value.push(new Date());
  refreshTableHeight()
}
onMounted(() => {
  refreshTableHeight()
})

</script>

<template>
    <the-alert />
    <v-container>
        <v-btn @click="insertNewRow">Insert new row</v-btn>
    </v-container>
    <v-table ref="tableComponent" fixed-header :height="tableHeight"> <!-- Do not format here the height to allow for null values -->
      <thead>
        <tr>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v in values" :key="v">
          <td>{{ v }}</td>
        </tr>
      </tbody>
    </v-table>
</template>

FIXED reproduction link.