博客

原先需求

要求是顶部和底部是由中间内容撑开的

，但是有的页面没内容就撑不开，

一开始使用 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);
}