原先需求 要求是顶部和底部是由中间内容撑开的,但是有的页面没内容就撑不开,
一开始使用 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);
}