100vh比100%更可靠，因其不依赖父元素高度；需清除body默认margin、使用box-sizing: border-box，并注意safari兼容性及ssr闪动问题。

用 100vh 而不是 100%

直接设 height: 100% 通常无效，因为父元素（比如 body 或 html）没显式高度时，百分比会失效。真正可靠的是视口单位：100vh 表示“100% viewport height”，它不依赖父级高度计算。

实操建议：

• 给目标 div 设置 height: 100vh，无需额外设置 html 或 body
• 如果页面有固定头部/底部，改用 calc(100vh - 60px)（把 60px 换成实际占用高度）
• 注意 Safari iOS 旧版本对 vh 的处理异常（地址栏缩放时值会变），如需兼容可加 JS 回退逻辑

避免滚动条意外出现

即使 div 高度是 100vh，页面仍可能多出滚动条——常见原因是 body 默认有 8px margin，或子元素外边距塌陷。

实操建议：

• 在 CSS 开头加 body { margin: 0; } 或更彻底的重置：* { margin: 0; padding: 0; }
• 检查该 div 是否有 border、padding 或 box-sizing: content-box（默认值），它们会让实际占用高度超过 100vh
• 稳妥写法：height: 100vh; box-sizing: border-box;

需要响应式全屏但内容要居中？

全屏 div 常用于登录页、引导页或单页应用主容器，往往还要垂直居中内容。别用 margin-top 算像素，用 Flex 更稳。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

• display: flex; flex-direction: column; justify-content: center; align-items: center;
• 如果内容本身是块级且需撑满高度（比如背景图），加 flex: 1; 到子元素
• 避免在 body 上直接设 Flex，容易干扰其他布局；只作用于目标 div

Vue/React 项目里动态全屏 div 怎么处理？

框架组件中，100vh 依然有效，但要注意：服务端渲染（SSR）时 vh 单位不可用（无视口概念），首次水合后才生效，可能导致闪动。

实操建议：

• 纯客户端渲染项目，放心用 100vh
• SSR 项目，初始设 min-height: 100vh，再用 useEffect 或 onMounted 补全 height: 100vh
• 若需监听视口变化（比如横竖屏切换），用 window.innerHeight + resize 事件，但注意节流

有些场景下 100vh 会被浏览器工具栏遮挡（尤其是移动端 Chrome 地址栏收起时），这时候得靠 JS 动态读取 visualViewport?.height 或监听 resize，但多数常规页面用 100vh 就够了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！