时间戳

首页 > 解决方案 > 在 nuxt.js 中使用 width:100vw 时有额外的空白

html - 在 nuxt.js 中使用 width:100vw 时有额外的空白

问题描述

我正在我的 nuxt.js 中构建组件横幅。

我尝试了很多方法来解决这个问题，但仍然没有解决，我尝试在我的and标签中添加margin:0;and ，但空白仍然存在。我在这个主题中尝试了另一个解决方案，关于using-100vw-and-vh-creates-extra-space-beyond-viewport-size-how-do-i-get-rid-of但是当我尝试它时结果仍然相同. 我也尝试过这个话题，关于100vw-causing-horizo​​ntal-overflow-but-only-if-more-than-one但没有运气。padding:0;htmlbody

这是我的横幅组件：

<template>
  <div id="paham-banner-career">
    <div class="banner-container">
      <h2>Let's See Where You Fit In</h2>
    </div>
  </div>
</template>

这是我的CSS：

<style lang="css" scoped>
#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>

有人可以救我来解决这个问题吗？

这就是我现在得到的我标记了额外的空白

标签： htmlcss

解决方案

尝试添加box-sizing

<style lang="css" scoped>

*{box-sizing: border-box;}

#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>

推荐阅读