48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import { onMounted, onUnmounted, ref, nextTick } from 'vue'
|
|
|
|
export function useFillHeight(elementRef, marginBottom = 20) {
|
|
const height = ref('auto')
|
|
|
|
const updateHeight = () => {
|
|
if (!elementRef.value) return
|
|
|
|
const rect = elementRef.value.getBoundingClientRect()
|
|
const windowHeight = window.innerHeight
|
|
// Calculate available space: window height - element top position - margin bottom
|
|
// We also need to account for the footer height if it's fixed or layout related
|
|
// The user mentioned "margin bottom from footer".
|
|
// If footer is in the flow, we might just want to fill the parent container?
|
|
// But user asked for JS resizing.
|
|
|
|
// Let's assume we want to fill down to (windowHeight - marginBottom).
|
|
// This assumes the element should stretch to the bottom of the viewport.
|
|
|
|
const availableHeight = windowHeight - rect.top - marginBottom
|
|
|
|
// Ensure minimum height
|
|
if (availableHeight > 100) {
|
|
height.value = `${availableHeight}px`
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Initial update after render
|
|
nextTick(() => {
|
|
updateHeight()
|
|
window.addEventListener('resize', updateHeight)
|
|
})
|
|
|
|
// Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
|
|
setTimeout(updateHeight, 300)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateHeight)
|
|
})
|
|
|
|
return {
|
|
height,
|
|
updateHeight
|
|
}
|
|
}
|