移动端导航栏无法铺满全屏问题求助

问题分析 #

你的导航栏在移动端无法铺满宽度，核心原因包括：

• 全局样式*强制设置background-color: white，破坏了导航栏的背景样式，且未设置box-sizing: border-box导致宽度计算异常
• 移动端nav-menu使用position: fixed但未设置right: 0，无法横向铺满屏幕
• 重复的媒体查询样式冲突，HTML结构中嵌套多个navbar类导致样式继承混乱
• JS中尝试用setAttribute设置宽度，属于无效操作（宽度需通过CSS控制）

修复步骤 #

1. 修正全局样式：移除*选择器的background-color，改用body设置页面背景，添加box-sizing: border-box确保元素宽度包含内边距和边框
2. 修复移动端导航菜单定位：给.nav-menu添加right: 0，确保fixed定位的菜单铺满整个屏幕宽度
3. 清理重复样式：合并重复的媒体查询，统一导航栏的尺寸设置
4. 优化HTML结构：移除嵌套的navbar类，避免样式冲突
5. 移除无效JS代码：删除navMenu.setAttribute('width', '100%')，改用CSS控制宽度

修改后的完整代码 #

HTML #

<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row">
  <nav class="navbar-container">
    <div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
    <div class="search_box_item item temp" id="ser">
      <input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
    </div>
    <div class="nav-items flex-row" id="tempo">
      <li class="ptopics item temp">New releases</li>
      <li class="profile item temp"><a href="profile.html">My profile</a></li>
      <li class="about item temp">About us</li>
    </div>
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <div class="nav-menu">
    </div>
  </nav>
</div>
<div class="firstp">
  <img style="float:left; max-width:50vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
  <p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
}

.navbar {
  width: 100%;
}

.navbar-container {
  display: flex;
  align-items: center;
  background-color: black;
  height: 50px;
  width: 100%;
}

.item {
  padding: 0 20px;
  background-color: black;
  color: white;
  text-decoration: solid;
}

.search_box_item {
  padding-left: 400px;
  width: 500px;
}

.pm {
  font-family: 'Courier New', Courier, monospace;
  color: aquamarine;
  font-size: 5vw;
  background-color: transparent;
  width: 3vw;
  margin: 10px 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  width: 100%;
  height: 40%;
  margin-top: 0;
}

.nav-items {
  list-style-type: none;
}

#in {
  border-radius: 25px;
}

.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

/* 移动端统一媒体查询 */
@media only screen and (max-width: 768px) {
  .navbar-container {
    height: 20vw;
  }
  
  .logo {
    height: 10vw;
    width: 10vw;
  }
  
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 5rem;
    right: 0; /* 添加这行确保铺满宽度 */
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-item {
    margin: 2.5rem 0;
  }
  
  .hamburger {
    display: block;
    cursor: pointer;
  }
  
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  
  .temp {
    visibility: collapse;
  }
}

/* 小屏移动端微调 */
@media only screen and (max-width: 480px) {
  .navbar-container {
    height: 30vw;
  }
}

JS #

document.getElementById('in').onkeypress = function(e) {
  if (e.keyCode == 13) {
    console.log("ent")
    var value = document.getElementById('in').value;
    console.log(value)
    window.open("result.html", "_self");
    sessionStorage.setItem("search", value);
  }
}

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  navMenu.classList.toggle("active");
}

const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}

var width = screen.width;
var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");

if (width < 650) {
  tempo.remove();
  ser.remove();
}

内容的提问来源于stack exchange，提问作者Aditya Giri