浏览器页面出现竖向滚动条的解决方案

qingy_20462026-05-11 8:53

存在着页面居中的需求

如果不做任何配置，盒子只包裹里面的图片、文字，高度不固定。这导致「内容会贴在页面顶部，不会垂直居中」。

为了让 div 盒子的高度撑满整个屏幕，通常会配置 min-height:100vh。

再配合：

css 复制代码

 display: flex;
 align-items: center; /* 垂直居中 */
 justify-content: center; /* 水平居中 */

盒子中的内容会居中在屏幕正中央。

然而，问题出现了

浏览器自带默认样式，页面默认有 外边距 margin。

在上古时代，网页大多是纯文章，浏览器希望文字不要贴着屏幕边缘，所以 <body> 容器和屏幕边框之间默认有 8px 的距离。

可是已经把 <div> 盒子的高度设置为屏幕高度了。这就多出来 8px，导致页面中展示的内容超过了屏幕高度。

要想解决这个问题，可以直接解决掉「容器和屏幕边框之间的默认距离」。

对于 HTML

css 复制代码

 body {
   margin: 0;
 }

对于 Vue

css 复制代码

 :global(body) {
   margin: 0;
 }

Vue 会把组件插入到 <body> 标签内。<body> 不在当前组件里，必须用 :global() 才能选中它。

所以，:global() 一定要有。它让样式全局生效，不被 scope 限制。

三行代码搞定。