Question

我尝试着看一些其他问题，这些问题都存在相似的相似问题，但尚未找到解决方案。

因此，只需设置一个非常基本的网页即可进行测试/发送消息。您可以在这里找到它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>

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 个答案: