Vue.js+Tailwind CSS页面右侧X轴溢出问题（已标记SOLVED）

DevOps 小满

2026-8-4

响应式布局右侧白色溢出与导航栏消失问题

已解决

我使用Vue.js和Tailwind CSS开发网站，遇到两个问题：

响应式布局下页面右侧出现无法解释的白色溢出区域，向下滚动时该区域会缩小，所有元素看起来都未超出列范围。
导航栏偶尔会消失。

问题表现：

小屏设备下页面右侧存在白色空白
页面底部也有白色空白

我尝试在style.css中给html添加overflow-x:hidden属性，仅在全屏模式下有效，小屏设备问题依旧。

解决方案

1. 修复右侧白色溢出问题

溢出根源是Hero组件顶部的SVG分隔器设置了width:138%，超出容器范围且父容器的overflow:hidden未完全生效，修改如下：

给.custom-shape-divider-top-1673798750添加width:100%和position:relative，确保容器能限制SVG溢出：

.custom-shape-divider-top-1673798750 {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    position: relative;
}

给SVG添加left: -19%，让超宽的SVG居中，溢出部分被父容器隐藏：

.custom-shape-divider-top-1673798750 svg {
    position: relative;
    display: block;
    width: 138%;
    height: 190px;
    left: -19%; /* 新增，抵消138%宽度的左右溢出 */
}

全局添加基础样式，避免其他元素溢出：

html, body {
    overflow-x: hidden;
    width: 100%;
}

2. 修复导航栏偶尔消失问题

导航栏使用fixed定位，可能因层级冲突或状态异常导致消失：

确认导航栏z-50的层级足够高，检查其他组件的z-index是否超过50；
给导航栏添加shadow-lg增强视觉辨识度，避免被背景色覆盖；
检查移动菜单的showMenu状态绑定逻辑，确保切换时状态更新正常。

相关组件代码

Hero组件

<template>
<div class=" overflow-hidden">
<div class="custom-shape-divider-top-1673798750 ">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
    </svg>
</div>
<section id="#Inicio" class=" h-screen w-full bg-texttonehover flex  flex-col justify-around  mx-auto z-0 relative top-0 left-0">
    <div class="py-8 px-4  mx-auto   text-left lg:py-16 lg:px-12">
        <h1 class="aos-item sm:text-7xl text-5xl  py-2 " data-aos="fade-right">Clases de <strong class=" ">Inglés</strong></h1> 
        <h1 class="aos-item sm:text-7xl text-5xl  py-2 " data-aos="fade-right">Para <TransitionRoot
            appear
        :show="isShowing"
        as="template"
        enter="transform transition duration-[500ms]"
        enter-from="opacity-0 rotate-[-120deg] scale-50"
        enter-to="opacity-100 rotate-0 scale-100"
        leave="transform duration-500 transition ease-in-out"
        leave-from="opacity-100 rotate-0 scale-100 "
        leave-to="opacity-0 scale-95"><strong class="" > {{ randomWord }}</strong>
        </TransitionRoot></h1>
        <h2 class="sm:text-2xl text-lg  py-2 aos-item " data-aos="fade-right">¡Aprende Inglés Cuándo Quieras!</h2>
        <div class="flex flex-row justify-start space-x-8">
            <div class="aos-item " data-aos-anchor-placement="center-bottom"  data-aos="fade-right">
                <button class="shadow-2xl font-bold bg-gradient-to-r from-main to-highlight my-2 hover:scale-105 text-texttone rounded-md border-texttone p-3 border-5"><a href="#Programas">Nuestros Programas</a> </button>                
            </div>

        </div>
    </div>
    
</section>
<div class=" custom-shape-divider-bottom-1673798205">
    <svg  data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path  d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
</svg>
</div>
</template>

<style lang="scss" scoped>
.custom-shape-divider-bottom-1673798205 {
    width: 100%;
    overflow: hidden  ;
    
}

.custom-shape-divider-bottom-1673798205 svg {
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
}

.custom-shape-divider-bottom-1673798205 .shape-fill {
    fill: #222626;
}
/** For tablet devices **/
@media (min-width: 768px)  {
    .custom-shape-divider-bottom-1673798205 svg {
        width: 100%;
        height: 242px;
    }
}
.custom-shape-divider-top-1673798750 {
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1673798750 svg {
    position: relative;
    display: block;
    width: 138%;
    height: 190px;
}

.custom-shape-divider-top-1673798750 .shape-fill {
    fill: #222626;
}

/** For tablet devices **/
@media (min-width: 768px) {
    .custom-shape-divider-top-1673798750 svg {
        width: 138%;
        height: 215px;
    }
}
/** For Bigger Screens**/
</style>

导航栏组件

<template>
<header class="bg-fade1 w-full fixed top-0 z-50 overflow-hidden ">       
    <nav class="container px-5 py-6 mx-auto xl:flex xl:justify-between xl:items-center">
        <div class="flex items-center justify-between">
            <!-- Link Logo to Main Page -->

            <h1 class="font-bold text-2xl text-texttone text-transparent bg-clip-text bg-gradient-to-r from-main to-highlight">
              <a href="#" >
                InglésPalMundo
              </a>
            </h1>

            <!-- Mobile menu button -->
            <div @click="showMenu = !showMenu" class="flex xl:hidden">
                <button type="button" class="text-texttone hover:text-texttonehover focus:outline-none focus:text-texttonehover">
                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-texttone">
                        <path fill-rule="evenodd" 
                        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                        ></path>
                    </svg>
                </button>
            </div>
        </div>
        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
        <ul :class="showMenu ? 'flex' : 'hidden'" class="flex-col mt-8 space-y-4 xl:flex xl:space-y-0 xl:flex-row xl:items-center xl:space-x-4 xl:mt-0">
          <li href="#" class="text-sm font-bold text-texttone hover:scale-105 hover:text-texttonehover hover:cursor-pointer">
            <a href="#">Inicio</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#SobreNosotros" >Sobre Nosotros</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#NuestrosProfesores" >Nuestros Profesores</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#Programas" >Programas</a> 
          </li>
          <li class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#ClasesPrivadas" >Clases Privadas</a> 

          </li>
          <li class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#Contactanos" >Contáctanos</a> 

          </li>
          <!-- <button class="bg-gradient-to-r from-main to-highlight hover:scale-105 text-texttone rounded-md border-texttone p-3 border-5 ">
            <strong>¡Reserva tu Leccion Ahora!</strong> 
        </button> -->
        </ul>
    
    </nav>
</header>
</template>

信息区组件

<template>  
<section id="SobreNosotros" class="bg-fade1   px-8 flex-wrap-reverse  md:flex-nowrap  relative h-screen flex sm:flex-row justify-evenly items-center z-0">
    <div class=" flex  flex-col justify-center items-center px-6">
        <div></div>
        <h1 class="sm:text-5xl text-4xl text-texttone text-center py-2 aos-item" data-aos="fade-right">Personalizado a tus <strong class="">Deseos</strong></h1> 
        <h2 class="sm:text-3xl text-xl text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">¡Aprende inglés de manera <strong>eficiente</strong> y <strong>cómoda</strong> con InglésPalMundo! </h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">Ofrecemos <strong>clases individuales y grupales</strong> a través de la modalidad en línea con programas de <strong>inglés básico, intermedio, avanzado, de negocios y de ingenieros.</strong> </h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">Todos nuestros tutores son <strong>hablantes nativos de inglés</strong> y cuentan con el español como segunda lengua.</h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">¡Mejora tus habilidades de inglés hoy mismo con InglésPalMundo!</h2>

    </div>

    <div class="hidden sm:flex aos-item" data-aos="fade-left">
        <img class=" object-contain  rounded-lg border-4 sm:border-8 border-texttone scale-50 md:scale-75" src="../../assets/videocall.jpg" />
    </div>
    
</section>
</template>

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

Vue.js+Tailwind CSS页面右侧X轴溢出问题（已标记SOLVED）

解决方案 #

1. 修复右侧白色溢出问题 #

2. 修复导航栏偶尔消失问题 #

相关组件代码 #

Hero组件 #

导航栏组件 #

信息区组件 #