视频作为网页背景时导航栏无法延伸至屏幕左侧的技术问题

数据老陈

2026-7-1

导航栏左侧无法贴合屏幕的修复方案

问题根源

导航栏左侧出现空白的核心原因：

nav 是 .content 的子元素，而 .content 设置了 padding:20px，导致 nav 在文档流中的初始位置左侧偏移20px
虽然 nav 设为 position:fixed，但未显式指定 left:0，浏览器会保留它在父元素中的偏移位置，最终呈现左侧空白、右侧贴合屏幕的效果

修复步骤

方法一：调整导航栏定位属性（快速修复）

修改 nav 的 CSS，添加 left:0 强制左对齐视口，确保背景铺满整个屏幕宽度：

nav {
  height: 80px;
  background: #29282e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem calc((100vw - 1300px) / 2);
  user-select: none;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0; /* 新增：强制左对齐视口 */
}

方法二：调整DOM结构（语义化优化）

将 nav 从 .content 容器中移出，放在视频标签之后、内容容器之前，彻底避免父元素内边距的影响：

<video autoplay muted loop id="myVideo">
    <source src="media/background.mp4" type="video/mp4">
</video>

<!-- 把导航栏移到这里 -->
<nav>
  <div class="logo">wonder〇</div>
  
  <div class="nav-items">
    <a href="/"><span>about</span></a>
    <a href="/"><span>contact</span></a>
    <a href="../login/login.html"><span>login</span></a>
  </div>
</nav>

<div class="content" width="100%">
  <section class="title">
    <div class="title-container">
      <div class="column-left">
        <h1>wondersphere</h1>
        <p>explore interactive and playful virtual museums.</p>
        <button class="button"><span>get started</span></button>
      </div>
      
      <div class="column-right">
        <img src="media/title_img.png" alt="" class="title-image" id="titleImage" />
      </div>
    </div>
  </section>
</div>