額外的空間出現在我的網站右側
[英]Extra space is appearing in right of my website
問題描述
我正在制作一個帶有引導程序和簡單的網站 css
但是網站右側出現了一些額外的內容，我嘗試使用 overflow-x hidden 來解決它，它解決了我的問題，但它對我的引導導航欄產生了不良影響，所以我決定不應用此修復程序。
* { margin: 0; padding: 0; box-sizing: border-box; }.cool-link::after { content: ''; display: block; width: 0; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.cool-link:hover::after { width: 100%; transition: width.3s; }.static-cool-link::after { content: ''; display: block; width: 100%; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.about { width: 100vw; height: 100vh; background-color: orangered; overflow-x: hidden; padding: 0; margin: 0; }
<,doctype html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="style.css"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>About - GlobalAdmissionCycle</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active static-cool-link" href="#">About </a> </li> <li class="nav-item"> <a class="nav-link active" href="#">|</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <section class="about"> </section> <.-- Option 1. Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
這是我的 html 代碼 -
請有人告訴我為什么這個額外的空間出現在我的網站上。
5 個解決方案
解決方案1
1 已采納 2021-01-28 11:12:40
width: 100vw on .about導致網站右側出現額外的空白區域。
您可以將其更改為width: 100%以解決此問題。
* { margin: 0; padding: 0; box-sizing: border-box; }.cool-link::after { content: ''; display: block; width: 0; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.cool-link:hover::after { width: 100%; transition: width.3s; }.static-cool-link::after { content: ''; display: block; width: 100%; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.about { width: 100%; /* <------------- change this */ height: 100vh; background-color: orangered; overflow-x: hidden; padding: 0; margin: 0; }
<,doctype html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="style.css"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>About - GlobalAdmissionCycle</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active static-cool-link" href="#">About </a> </li> <li class="nav-item"> <a class="nav-link active" href="#">|</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <section class="about"> </section> <.-- Option 1. Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
解決方案2
1 2021-01-28 13:24:37
出現水平滾動條（頁面右側的額外空間）是因為width:100vw包含垂直滾動條寬度。
視口百分比長度與初始包含塊的大小有關。 當初始包含塊的高度或寬度發生變化時，它們會相應地縮放。 但是，當根元素上的 overflow 值為 auto 時，將假定任何滾動條都不存在。 請注意，初始包含塊的大小受視口上滾動條的影響。
解決方案 1
刪除width:100vw並添加width:100%到.about
方案二
添加max-width:100%; 到.about
解決方案 3
添加overflow-x:hidden到主體/父容器
解決方案3
0 2021-01-28 11:24:20
由於您在導航欄中使用“高度：100vh”而導致的額外空間
**.about {
width: 100%;
height: calc(100vh - 59px);
background-color: orangered;
overflow-x: hidden;
padding: 0;
margin: 0;
}**
解決方案4
0 2021-01-28 11:33:51
在大約 class 內將寬度從100vw更改為100%
.about {
width: 100%;
//...
}
解決方案5
0 2021-01-28 11:37:34
將寬度更改為 100% in.about class。您還可以將 css 添加到滾動條以獲得更好的外觀
* { margin: 0; padding: 0; box-sizing: border-box; }.cool-link::after { content: ''; display: block; width: 0; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.cool-link:hover::after { width: 100%; transition: width.3s; }.static-cool-link::after { content: ''; display: block; width: 100%; height: 3px; background: white; transition: width.3s; border-radius: 3px; }.about { width: 100%; height: 100vh; background-color: orangered; overflow-x: hidden; padding: 0; margin: 0; } /* css for scrollbar*/.sbar::-webkit-scrollbar-track { border-radius: 5px; background-color: #fff; }.sbar::-webkit-scrollbar { width: 6px; background-color: #fff; }.sbar::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: inset 0 0 4px rgba(190, 52, 8, 1); background-color: orangered; }.scrollbar { scrollbar-face-color: #e36714; scrollbar-highlight-color: #fff; scrollbar-3dlight-color: #fff; scrollbar-darkshadow-color: #fff; scrollbar-shadow-color: #fff; scrollbar-arrow-color: #fff; scrollbar-track-color: #fff; -ms-overflow-style: none; overflow-y: scroll; }
<,doctype html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="style.css"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>About - GlobalAdmissionCycle</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active static-cool-link" href="#">About </a> </li> <li class="nav-item"> <a class="nav-link active" href="#">|</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a> </li> <li class="nav-item"> <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <section class="about"> </section> <.-- Option 1. Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
如何刪除網站右側的多余空間
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.