Nuxt3 layout, 100vh problem of iOS Safari, compatible with PC and mobile iOS

The original requirement is that the top and bottom are supported by the middle content , but some pages cannot be supported without content.

At the beginning, I used min-height: calc(100vh - 410px); but there was a problem under the iOS mobile phone,

So it is modified to: monitor the height of the viewport, and then subtract the fixed height of the head and bottom.

onMounted(() => {
    
    
  const appHeight = () => {
    
    
    const doc = document.documentElement;
    doc.style.setProperty("--app-height", `${
    
    window.innerHeight}px`);
  };
  window.addEventListener("resize", appHeight);
  appHeight();
});


.inEducation {
    
    
  min-height: calc(var(--app-height) - 410px);
}