如何在 HTML 中删除侧滚动条答案

【问题标题】：How to remove side-scrollbar in HTML如何在 HTML 中删除侧滚动条
【发布时间】：2021-04-12 23:59:15
【问题描述】：

我目前正在参加 FreeCodeCamp 课程来学习 HTML/CSS 编程。我在产品登陆页面上遇到了一些问题。 This 是我目前建立的网站。如您所见，下方添加了一个“滚动条”，用于将我的页面从左向右移动。我想知道如何删除它，因为我在最右边没有内容？

我最初认为这是由于我的边距/填充，但我包含了以下代码行：“box-sizing:border-box”，因此问题与我的边距/填充无关（如果我'我错了）。

任何帮助将不胜感激！

这是我的代码：

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}

body {
  background-color: #ececec;
  font-family: Lato;
  margin: 0 0 100px;
  padding: 25px;
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px; 
}

#img-box {
  width: 60vw;
}

#nav-bar {
  width: 35vw;
  display: block;
}

nav > ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

li > a {
  text-decoration: none;
  color: #000;
}

#header-img {
  max-width: 300px;
}

section {
  margin-top: 50px;
}

#sign_up, #how_it_works {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sign_up > form {
  display: block;
  text-align: center;
}

#email {
  padding: 0.25rem 0.50rem;
  border: 1px solid;
  max-width: 275px;
  width: 100%;
}

#submit, button {
  max-width: 150px;
  width: 100%;
  margin: 15px;
  background-color: #f1c40f; 
  border: 0;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

input {
  border-radius: 4px;
}

h1 {
  display: block;
  margin-bottom: 20px;
}

#features {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 30px;
}

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

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 125px;
  color: darkorange;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  height: 125px;
}

.text h2, p {
  display: block;
  margin: 0;
}

#pricing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  border: 1px solid #000000;
  border-radius: 4px;
  max-width: 300px;
  width: 100%;
  padding-bottom: 1rem;
  margin: 0.5rem;
  text-align: center;
}

.header-card {
  background-color: #ddd;
  font-size: 14px;
}

h3, h4 {
  padding: 1rem 0;
  margin: 0;
}

.price {
  font-size: 22px;
}

.description p {
  line-height: 2rem;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #ddd;
  text-align: right;
  overflow: hidden;
}

footer > ul {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}

footer > ul > li {
  padding: 0 1rem;
}

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

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav > ul {
    flex-direction: column;
  }
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://kit.fontawesome.com/2545702331.js" crossorigin="anonymous"></script>

<header id="header">
  <div id="img-box">
    <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li>
        <a href="#features" class="nav-link">Features</a>
      </li>
      <li>
        <a href="#how_it_works" class="nav-link">How It Works</a>
      </li>
      <li>
        <a href="#pricing" class="nav-link">Pricing</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <section id="sign_up">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" placeholder="Enter your email address">
      <input type="submit" id="submit" value="GET STARTED">
    </form>
  </section>
  
  <section id="features">
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="text">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. 
           This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="text">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. 
           We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full"></i>
      </div>
      <div class="text">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults
           and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
  
  <section id="how_it_works">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7khUHbQFK9I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </section>
  
  <section id="pricing">
    <div class="card">
      <div class="header-card">
        <h3>TENOR TROMBONE</h3>
      </div>
      <div class="price">
        <h4>$600</h4>
      </div>
      <div class="description">
        <p>Small Size<br>Easy to carry around<br>6 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>BASS TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$900</h4>
      </div>
      <div class="description">
        <p>Medium Size<br>Easy to carry around<br>8 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>VALVE TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$1200</h4>
      </div>
      <div class="description">
        <p>Large Size<br>Professional Look<br>10 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
  </section>
  
</main>

<footer>
  <ul>
    <li>Privacy</li>
    <li>Terms</li>
    <li>Contact</li>
  </ul>
</footer>

【问题讨论】：

添加溢出-x:hidden;到你的 html css。
这能回答你的问题吗？ How do I remove the horizontal scrollbar in a div?

标签： html css

【解决方案1】：

将overflow-x:hidden; 添加到您的html 类中，您的代码应如下所示

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

【讨论】：

【解决方案2】：

    <!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}

body {
  background-color: #ececec;
  font-family: Lato;
  margin: 0 0 100px;
  padding: 25px;
   overflow-x: hidden; /* Hide horizontal scrollbar */
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px; 
}

#img-box {
  width: 60vw;
}

#nav-bar {
  width: 35vw;
  display: block;
}

nav > ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

li > a {
  text-decoration: none;
  color: #000;
}

#header-img {
  max-width: 300px;
}

section {
  margin-top: 50px;
}

#sign_up, #how_it_works {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sign_up > form {
  display: block;
  text-align: center;
}

#email {
  padding: 0.25rem 0.50rem;
  border: 1px solid;
  max-width: 275px;
  width: 100%;
}

#submit, button {
  max-width: 150px;
  width: 100%;
  margin: 15px;
  background-color: #f1c40f; 
  border: 0;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

input {
  border-radius: 4px;
}

h1 {
  display: block;
  margin-bottom: 20px;
}

#features {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 30px;
}

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

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 125px;
  color: darkorange;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  height: 125px;
}

.text h2, p {
  display: block;
  margin: 0;
}

#pricing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  border: 1px solid #000000;
  border-radius: 4px;
  max-width: 300px;
  width: 100%;
  padding-bottom: 1rem;
  margin: 0.5rem;
  text-align: center;
}

.header-card {
  background-color: #ddd;
  font-size: 14px;
}

h3, h4 {
  padding: 1rem 0;
  margin: 0;
}

.price {
  font-size: 22px;
}

.description p {
  line-height: 2rem;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #ddd;
  text-align: right;
  overflow: hidden;
}

footer > ul {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}

footer > ul > li {
  padding: 0 1rem;
}

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

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav > ul {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://kit.fontawesome.com/2545702331.js" crossorigin="anonymous"></script>

<header id="header">
  <div id="img-box">
    <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li>
        <a href="#features" class="nav-link">Features</a>
      </li>
      <li>
        <a href="#how_it_works" class="nav-link">How It Works</a>
      </li>
      <li>
        <a href="#pricing" class="nav-link">Pricing</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <section id="sign_up">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" placeholder="Enter your email address">
      <input type="submit" id="submit" value="GET STARTED">
    </form>
  </section>
  
  <section id="features">
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="text">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. 
           This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="text">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. 
           We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="feature">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full"></i>
      </div>
      <div class="text">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults
           and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
  
  <section id="how_it_works">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7khUHbQFK9I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </section>
  
  <section id="pricing">
    <div class="card">
      <div class="header-card">
        <h3>TENOR TROMBONE</h3>
      </div>
      <div class="price">
        <h4>$600</h4>
      </div>
      <div class="description">
        <p>Small Size<br>Easy to carry around<br>6 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>BASS TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$900</h4>
      </div>
      <div class="description">
        <p>Medium Size<br>Easy to carry around<br>8 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
    <div class="card">
      <div class="header-card">
        <h3>VALVE TREMBONE</h3>
      </div>
      <div class="price">
        <h4>$1200</h4>
      </div>
      <div class="description">
        <p>Large Size<br>Professional Look<br>10 Keys</p>
      </div>
      <div class="button">
        <button type="button">SELECT</button>
      </div>
    </div>
  </section>
  
</main>

<footer>
  <ul>
    <li>Privacy</li>
    <li>Terms</li>
    <li>Contact</li>
  </ul>
</footer>

</body>
</html>

希望对你有帮助！！

【讨论】：

【解决方案3】：

要隐藏滚动条，请分别使用overflow-x 或overflow-y 来隐藏水平和垂直滚动条。

身体{

溢出-x：隐藏； /* 在此处隐藏水平滚动条输入代码 */ }

【讨论】：