如何移除页面右侧的空白间隙

Question

我正在构建一个响应式网站，使用 overflow-x: hidden 属性来防止页面出现水平滚动条和显示白色空白区域，但在手机上无效。每次我返回到该页面时，水平滚动条又会出现，右侧也会出现白色空间。我查看了其他关于此问题的各种问答，但似乎无法解决。

我认为这与页面上的卡片有关，是卡片样式中的某些问题导致此问题的吗？我应该如何删除白色空白区域？

html {
overflow-x: hidden;
}
.portfolio-header {
margin-top: 19rem;
margin-left: 31%;
font-size: 30px;
}
}
.card-square
{
position: relative;
width: 90%;
height: 300px;
display: flex;
margin-left: 0px;
margin-top: 50px;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}

.card-square-2 {
 margin-top: 0rem;  
 }
.card-square span:nth-child(1) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate 6s linear infinite;  
 }
 .card-square:hover span:nth-child(1) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 .card-square span:nth-child(2) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate2 4s linear infinite;
 }

 .card-square:hover span:nth-child(2) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 .card-square span:nth-child(3) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate 10s linear infinite;
 }

 .card-square:hover span:nth-child(3) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 @keyframes animate {
 0% {
 transform: rotate(0deg); 
 }
 100% {
 transform: rotate(360deg);  
 }
 }
 @keyframes animate2 {
 0% {
 transform: rotate(360deg); 
 }
 100% {
 transform: rotate(0deg);  
 }
 }
 .content {
 position: relative;
 color: #000;
 text-align: center;
 transition: 0.5s;
 z-index: 1000;
 }

 .content a {
 position: relative;
 /* display: inline-block; */
 margin-top: 10px;
 border: 2px solid #fff;
 padding: 6px 18px;
 text-decoration: none;
 color: #fff;
 margin-left: 12px;
 font-weight: 600;
 border-radius: 73% 27% 44% 56% /
 49% 44% 56% 51%;
 }
 .content a:hover {
 background: #000;
 color: #333;
 } 
 .content p, .content h2 {
 text-align: center;
 width: 85%;
 margin-left: 7.5%;
 }
 .content p {
 font-size: 16px;
 }
 @media only screen and (min-width: 768px) {
 .card-square {
 width: 400px;
 height: 400px;
 margin-left: 130px;
 }
  
.card-square-2 {
margin-top: -500px;
margin-left: 55%;
}
.card-square-4 {
margin-left: 55%;
margin-top: -500px;
}
.content p {
font-size: 20px;
}
}

  <section class="portfolio" id="portfolio">
  <h1 class="portfolio-header">Card section</h1>
  
  <div class="card-square">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 1</h2>
      <p> This is card 1.
      </p>
      <a href="#">Link btn</a>
    </div>
  </div>  
  <div class="card-square card-square-2">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 2</h2>
      <p>This is card 2. </p>
      <a href="#">Link</a>
    </div>
  </div>  
  <div class="card-square card-square-3">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 3</h2>
      <p>This is card 3.</p>
      <a href="#">Link</a> 
      <a class="second-btn" href="#">Link 2</a>
    </div>
  </div>  
  <div class="card-square card-square-4">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 4</h2>
      <p>This is card 4.</p>
      <a href="#">Link 4</a>
    </div>
  </div>  
  </section> 

- SK7

---

问题不清楚，因为您提供的fiddle在桌面和移动设备上都可以正常工作。 - Awais

@Awais 当您在此处或JSFiddle上运行代码片段时，viewport元标记将由主机网站定义，从而遮盖了OP正在查询的问题。 - AM Douglas

Answer 1

这是因为您使用了width: 100vw - 如果您有垂直滚动条，vw 将不会考虑滚动条并会给您水平滚动条。请改用width: 100%（或者将其删除，因为h2是一个块级元素，并且自然占据整个宽度）。

html,
body {
  margin: 0;
  min-height: 100%;
  min-width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

section {
  margin-bottom: -33px;
}

h1 {
  margin-left: 20%;
  color: rgb(22, 168, 194);
}


/* Hero Image & navbar */

.banner-text {
  width: 100%;
  position: absolute;
}

* {
  box-sizing: border-box;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: none;
  color: white;
  font-size: 20px;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  text-decoration: none;
  color: white;
  padding-left: 1rem;
  padding-right: 1em;
  display: block;
}

.navbar-links li:hover {
  background: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 2.5rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}


/* Phones */

@media (min-width: 320px) and (max-width: 480px) {
  .toggle-button {
    display: flex;
  }
  .navbar-links li:hover {
    background: #555;
  }
  .navbar-links {
    display: none;
    width: 100%;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-links ul {
    flex-direction: column;
    width: 100%;
    /* margin-top: 30px; */
  }
  .navbar-links li {
    text-align: center;
  }
  .navbar-links li .navlink {
    padding: 0.5rem 1rem;
  }
  .navbar-links.active {
    display: flex;
  }
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 10px;
}

.banner-text h2 {
  text-align: center;
  color: #fff;
  width: 100%;
  font-size: 28px;
  margin-top: 48%;
}

.banner-text .name {
  margin-bottom: -95px;
}


/* For desktop: */

@media only screen and (min-width: 768px) {
  .banner-text h2 {
    margin-top: 14%;
    font-size: 54px;
  }
  .banner-text .name {
    margin-bottom: -100px;
  }
}

.animation-area {
  /* background: linear-gradient(to left,   #16A8C2, #1B1C1C); */
  background: rgb(22, 168, 194);
  background: linear-gradient(0deg, rgba(22, 168, 194, 1) 0%, rgba(27, 28, 28, 1) 100%);
  width: 100%;
  height: 100vh;
}

.box-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 97%;
  overflow: hidden;
}

.box-area .box-item {
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.2);
  animation: animatedSquares 20s linear infinite;
  bottom: -150px;
}

.box-area li:nth-child(1) {
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s
}

.box-area li:nth-child(2) {
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}

.box-area li:nth-child(3) {
  left: 70%;
  width: 100px;
  height: 100px;
  animation-duration: 5.5s;
}

.box-area li:nth-child(4) {
  left: 42%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s;
}

.box-area li:nth-child(5) {
  left: 65%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}

.box-area li:nth-child(6) {
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}

@keyframes animatedSquares {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) rotate(360deg);
    opacity: 0;
  }
}

<section>
  <div class="banner-text">
    <nav class="navbar">
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
          <li><a class="navlink" href="#">navlink1</a></li>
          <li><a class="navlink" href="#">navlink2</a></li>
          <li><a class="navlink" href="#">navlink3</a></li>
          <li><a class="navlink" href="#">navlink4">CV</a></li>
        </ul>
      </div>
    </nav>
    <h2 class="header name">title name</h2>
    <h2 class="header role">title role</h2>
  </div>

  <div class="animation-area">
    <ul class="box-area">
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
    </ul>
  </div>
</section>
<section class="about" id="about">
  <!-- social media icon bar -->
  <ul class="social-media">
    <li class="social-item">
      <a href="" class="github">
        <i class="fa fa-github"></i></a>
    </li>
    <li class="social-item">
      <a href="">
        <i class="fa fa-linkedin"></i></a>
    </li>
    <li class="social-item">
      <a href="">
        <i class="fa fa-stack-overflow"></i></a>
    </li>
  </ul>
  <ul class="social-media-2">
    <li class="social-item">
      <a href="" class="codepen">
        <i class="fa fa-codepen"></i></a>
    </li>
    <li class="social-item">
      <a href="" class="dribble">
        <i class="fa fa-dribbble"></i></a>
    </li>
    <li class="social-item">
      <a href="" class="twitter">
        <i class="fa fa-twitter"></i></a>
    </li>
  </ul>
  <h1 class="about-header">About</h1>
  <p class="about-text">text
  </p>
  <p class="career-story">
    text
  </p>
  <div class="polaroid">
    <img class="work-colleagues" src="./Images/img.jpg" alt="alt">
    <div class="description">
      <p class="description-text">text
        <a class="featured-link" href="link" width="100%" height="100%">
          Polaroid text</a> </p>
    </div>
  </div>
  <p class="interests">
    text
  </p>
  <div class="polaroid polaroid-2">
    <img src="./Images/img.jpg" alt="alt" width="100%" height="100%">
    <div class="description">
      <p class="description-text">text
      </p>
    </div>
  </div>
</section>

- Pete

Answer 2

你已经走在正确的道路上了，但需要记住的一件事是，你还需要在HTML头部添加meta标签。

解决方法

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">

当然，在CSS中需要指定溢出行为：

html {
    overflow-x: hidden;
}

说明

我将解释meta标签:

• width=device-width 这意味着我们告诉浏览器调整到设备宽度
• width=minimum-scale 这是最小缩放比例
• width=maximum-scale 这是最大缩放比例
• width=initial-scale 其中开始
• user-scalable 允许用户捏（在移动设备上放大）或不允许。

您可以在w3schools上阅读更多信息。

- Shahar

---

问题中提供的代码结合您建议的viewport元标记似乎运行良好，如果没有它，则无法正确缩放到移动屏幕大小，因此我认为您已经找到了问题所在，前提是OP已经完整发布了他们的代码。 - AM Douglas

Answer 3

我找到了它表现为什么会这样的原因。 你把标题和主要内容放在了一个单独的部分中。 这导致了所有的问题。 总是明智地尝试分离部分 一旦你分离了，你就可以看到卡片在中心显示。 稍后调整你的.card-square类的margin-left。

我没有改变你的CSS。只是修改了你的HTML来分离这些部分。现在我在移动视图中看不到空白区域了。

<section class="portfolio" id="portfolio">
            <h1 class="portfolio-header">Card section</h1>
        </section><section>
            <div class="card-square">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 1</h2>
                <p> This is card 1.
                </p>
                <a href="#">Link btn</a>
              </div>
            </div>  
            <div class="card-square card-square-2">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 2</h2>
                <p>This is card 2. </p>
                <a href="#">Link</a>
              </div>
            </div>  
            <div class="card-square card-square-3">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 3</h2>
                <p>This is card 3.</p>
                <a href="#">Link</a> 
                <a class="second-btn" href="#">Link 2</a>
              </div>
            </div>  
            <div class="card-square card-square-4">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 4</h2>
                <p>This is card 4.</p>
                <a href="#">Link 4</a>
              </div>
            </div>  
            </section> 

- Sadesh Kumar N