如何去除頁面右側的空白

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>

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>

Answer 2

您走在正確的軌道上，但要記住的一件事是您還需要向 HTML 標頭添加元標記。

解決方案

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

當然，在 CSS 中指定溢出行為：

html {
    overflow-x: hidden;
}

解釋

我將分解元標記：

• width=device-width這意味着我們告訴瀏覽器調整到設備寬度
• width=minimum-scale這是您應該使用的最小比例
• width=maximum-scale這是你應該去的最大比例
• width=initial-scale哪里開始
• user-scalable以允許用戶捏合（在移動設備上放大）或不捏合。

您可以在w3schools上閱讀更多相關信息。

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>