盡管寬度為100％，機身為100vw，但標頭比屏幕寬

Question

我試着看了一些其他問題，它們的問題大致相同，但尚未找到解決方案。

因此，只需設置一個非常基本的網頁即可進行測試/發送消息。 您可以在這里找到它https://gogglebot.net/test/test/我無法包含MWE，因為將其剝離為僅標題即可使其正常工作，因此我將整個內容放在最后。
我不為這個可怕的顏色或默認字體表示歉意。

我有一個標題，然后向左浮動2個div作為側欄，然后是主體。 在某個時候出現了水平滾動條，我不知道為什么。 為了解決此問題，我嘗試將所有<html>設置為100vw。

我仍然對發生的事情一無所知，將它逐段放回去，向我展示了它的側邊欄，出於某種原因，它滿足了其生日願望，希望變得更寬，但是我不知道為什么會導致這種情況。 側邊欄+主體小於100％。 我從另一個問題中找到了一些代碼，該代碼檢查視口寬度以上的元素，但未返回任何內容。 從Chrome的檢查工具中，我看不到太大的東西，只是寬度為100％的頁眉超出了屏幕。

奇怪的是，如果我將側邊欄設置為100％，它也會過度擴展到相同的數量，但仍然會說其1366像素寬（這是期望值）

在Edge中獲得相同的結果。

 <html> <head> <style> body, html { margin: 0; width: 100vw; } #header { /*width:100%;*/ /* This makes no difference */ height: 50px; background-color: DodgerBlue; /*margin:auto;*/ border-bottom: 1px solid black; } #headtitle { /*position: absolute; transform: translate(0%, -50%);*/ /* bad */ line-height: 50px; /* better? */ margin: 0; width: 20%; /* checking this isn't a culprit of too-wide-header */ } #sidebar { float: left; margin: 0px; padding: 5px; width: 15%; height: 100%; border-right: 1px solid black; background-color: #b4b4b4 } #main { float: left; padding: 7px; margin: 0px; width: 80%; } .sideitem { background-color: #b4b4c5; margin-top: 5px; margin-bottom: 5px; height: 20pt; line-height: 20pt; transition-duration: 1s; padding-left: 5px; } .sideitem:hover { background-color: #787878; padding-left: 40%; } </style> <title>Sidebars are easy</title> </head> <body> <div id="header"> <h1 id="headtitle">header</h1> </div> <div id="sidebar"> <a href=''> <div class='sideitem'><span class='sidetext'>Side 1 </span></div> </a> <a href=''> <div class='sideitem'><span class='sidetext'>Side 2 </span></div> </a> <a href=''> <div class='sideitem'><span class='sidetext'>Side 3 </span></div> </a> </div> <div id="main"> <h1>Main page!</h1> <br> <ol> <li>sidebars are easy</li> <li>So easy that this guy</li> <li>Who hasn't even got a computer science degree</li> <li>Figured it out in like <strike>20 minutes</strike> 3 hours</li> </ol> <br> Pretty good! <br> <span class="heart"><3</span> </div> </body> </html>

Answer 1

對於簡短的簡單修復，只需添加

overflow-x:hidden;

到您的身體或父容器。 這將刪除所有水平滾動。

就您而言，只需像這樣更改body / html CSS

 <html> <head> <style> body, html { overflow-x:hidden; margin: 0; width: 100vw; } #header { /*width:100%;*/ /* This makes no difference */ height: 50px; background-color: DodgerBlue; /*margin:auto;*/ border-bottom: 1px solid black; } #headtitle { /*position: absolute; transform: translate(0%, -50%);*/ /* bad */ line-height: 50px; /* better? */ margin: 0; width: 20%; /* checking this isn't a culprit of too-wide-header */ } #sidebar { float: left; margin: 0px; padding: 5px; width: 15%; height: 100%; border-right: 1px solid black; background-color: #b4b4b4 } #main { float: left; padding: 7px; margin: 0px; width: 80%; } .sideitem { background-color: #b4b4c5; margin-top: 5px; margin-bottom: 5px; height: 20pt; line-height: 20pt; transition-duration: 1s; padding-left: 5px; } .sideitem:hover { background-color: #787878; padding-left: 40%; } </style> <title>Sidebars are easy</title> </head> <body> <div id="header"> <h1 id="headtitle">header</h1> </div> <div id="sidebar"> <a href=''> <div class='sideitem'><span class='sidetext'>Side 1 </span></div> </a> <a href=''> <div class='sideitem'><span class='sidetext'>Side 2 </span></div> </a> <a href=''> <div class='sideitem'><span class='sidetext'>Side 3 </span></div> </a> </div> <div id="main"> <h1>Main page!</h1> <br> <ol> <li>sidebars are easy</li> <li>So easy that this guy</li> <li>Who hasn't even got a computer science degree</li> <li>Figured it out in like <strike>20 minutes</strike> 3 hours</li> </ol> <br> Pretty good! <br> <span class="heart"><3</span> </div> </body> </html>

盡管寬度為100％，機身為100vw，但標頭比屏幕寬

問題描述

1 個解決方案

解決方案1
1 已采納 2019-05-01 00:00:35

盡管寬度為100％，機身為100vw，但標頭比屏幕寬

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-01 00:00:35

解決方案1
1 已采納 2019-05-01 00:00:35