nuxt3 布局,iOS Safari 的 100vh 问题,兼容PC端移动端iOS

原先需求 要求是顶部和底部是由中间内容撑开的,但是有的页面没内容就撑不开,

一开始使用 min-height: calc(100vh - 410px); 但是在iOS手机端下出现问题,

所以修改为:监听视口高度,然后给减去头部和底部固定的高度,即可

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

你可能感兴趣的:(nuxt3,safari,javascript,前端)