My header is wider than the screen despite 100% width and body having 100vw
Question
I've tried looking at a few other questions with vaguely similar problems but am yet to find a solution.
So just setting up a very basic web page, just for testing/messing. You can find it here https://gogglebot.net/test/test/ I'm unable to include a MWE as stripping it down to just the header makes it function fine so I'll put the entire thing at the end.
I make no apologies for the ghastly colour nor default font.
I've got a header and then 2 left floated divs as a sidebar then main body. At some point a horizontal scroll bar appeared and I have no idea why. In my attempt to fix it I tried setting everything up to < html > to be 100vw.
I am still lost as to what's going on, putting it back together piece by piece shows me that its the sidebar that for some reason fulfils its birthday wish to become wider, but I have no idea why this would cause this. The sidebar + main body are smaller than 100%. I found some code from another question that checks for elements above the viewport width and it returned nothing. From Chrome's inspect tools I cannot see anything that's too large, just the 100% width header extends beyond the screen.
Weirdly, if I set the sidebar to be 100%, it also overextends to the same amount, but it still says its 1366px wide which is the expected value (laptop)
Getting the same result in 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>
1 answers
solution1
1 ACCPTED 2019-05-01 00:00:35
For a short simple fix just add
overflow-x:hidden;
to your body or parent container. This will remove any horizontal scrolling.
In your case just change your body/html CSS like so
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.