如何用HTML、CSS和Bootstrap消除视频溢出滚动条及导航栏异常

问题根因 #

• 没有对视频及外层容器做尺寸约束，视频会默认以自身原生分辨率渲染，只要视频本身尺寸大于视口，就会直接撑出横向、纵向滚动条。
• .home-data-container 使用了 position: relative; bottom: 850px 的定位写法：相对定位的偏移不会将元素移出正常文档流，元素原本占据的空间仍然保留，相当于凭空为页面增加了850px的垂直占位，既推高了页面整体高度生成多余滚动条，也会挤压导航栏的正常布局位置。
• 没有全局的溢出防护规则，内部元素一旦超出视口尺寸，浏览器就会自动生成无意义滚动条。

修正方案 #

1. 补充全局基础防护，从根源屏蔽无意义滚动条：

   * {
     margin: 0;
     padding: 0;
     font-family: 'Exo 2', sans-serif;
     box-sizing: border-box; /* 避免内边距、边框额外撑大元素尺寸 */
   }
   html, body {
     width: 100%;
     overflow-x: hidden; /* 屏蔽横向多余滚动条 */
   }
   

2. 重构视频区块的布局逻辑，实现背景视频自适应填充、不溢出的效果：

   .home {
     position: relative;
     width: 100%;
     height: 100vh; /* 首屏区块占满整个视口高度 */
     overflow: hidden; /* 裁掉视频超出区块的部分，不生成滚动条 */
   }
   .video-container {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
   .video-container video {
     width: 100%;
     height: 100%;
     /* 等比例裁剪视频铺满容器，不会拉伸变形，适配任意分辨率的视频 */
     object-fit: cover;
     object-position: center;
   }
   

3. 修正.home-data-container的定位逻辑，移除会撑高页面的硬偏移写法：
   原来的相对定位会占用文档流空间，改成绝对定位浮在视频上层，完全不产生额外的页面占位：

   .home-data-container {
     position: absolute;
     z-index: 1;
     /* 用垂直居中逻辑调整位置，不需要硬算850px的偏移值 */
     top: 50%;
     left: 40px;
     transform: translateY(-50%);
   }
   

补充说明 #

• 你之前手动给video标签加宽高属性不生效，本质是因为外层没有设置容器尺寸边界，视频会优先按自身原始分辨率渲染。搭配object-fit: cover规则后，不管上传什么分辨率的视频，都会自动适配容器尺寸，不会撑出滚动条。
• 相对定位的偏移不会移除元素的文档流占位，是之前页面布局错乱、出现多余垂直滚动条的核心诱因，这类浮层内容优先用绝对定位实现，避免挤占正常布局的空间。

内容的提问来源于stack exchange，提问作者Zain Sahi