我试着看了一些其他问题，这些问题都存在相似的相似问题，但尚未找到解决方案。
因此，只需设置一个非常基本的网页即可进行测试/发送消息。您可以在这里找到它https://gogglebot.net/test/test/我无法包含MWE，因为将其剥离为仅标题即可使其正常工作，因此我将整个内容放在最后。
我不会为可怕的颜色或默认字体表示歉意。
我有一个页眉，然后向左浮动2个div作为侧边栏，然后是主体。在某个时候出现了水平滚动条，我不知道为什么。为了解决此问题，我尝试将所有设置为100vw。
我仍然对发生的事情一无所知，将它逐段放回去，向我展示了它的侧边栏出于某种原因满足了生日的愿望，但我不知道为什么会导致这种情况。侧栏+主体小于100％。我从another question中找到了一些代码来检查视口宽度以上的元素，但没有返回任何内容。在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>最佳答案
对于简短的简单修复，只需添加
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>关于html - 尽管宽度为100％，机身为100vw，但 header 仍比屏幕宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55930063/