我已经尝试查看其他一些具有模糊相似问题的问题，但尚未找到解决方案。
所以只需设置一个非常基本的网页，仅用于测试/困惑。你可以在这里找到它https://gogglebot.net/test/test/我无法包含 MWE，因为将其剥离到标题使其功能正常，所以我将把整个内容放在最后。
我不为可怕的颜色和默认字体道歉。
我有一个标题，然后是 2 个左浮动的 div 作为侧边栏，然后是主体。在某个时候出现了一个水平滚动条，我不知道为什么。在我尝试修复它时，我尝试将 之前的所有内容都设置为 100vw。
我仍然对发生的事情一头雾水，把它一 block 一 block 地放回去告诉我，它的侧边栏出于某种原因实现了它的生日愿望，变得更宽了，但我不知道为什么会导致这种情况。侧边栏+主体小于100%。我从 another question 中找到了一些代码检查视口(viewport)宽度以上的元素，但没有返回任何内容。从 Chrome 的检查工具中，我看不到任何太大的东西，只有 100% 宽度的 header 超出了屏幕。
奇怪的是，如果我将侧边栏设置为 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 或父容器。这将删除任何水平滚动。
在您的情况下，只需像这样更改您的 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% 宽度和 body 有 100vw，但我的标题比屏幕宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55930063/