在我的容器上设置了宽度：100vw 时出现水平溢出答案

【问题标题】：Getting horizontal overflow when width: 100vw is set on my container在我的容器上设置了宽度：100vw 时出现水平溢出
【发布时间】：2022-08-07 05:13:20
【问题描述】：

所以我为我的网站设计创建了一个基本网格，我使用并确保添加视口元：

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

问题是，当我在浏览器中运行该站点时，它的底部和右侧似乎有滑块，就像内容大于我屏幕的视图区域一样，并且网格中 div 的边框不在视图中。如何解决？这是我的代码：

body{
    margin: 10px;
}
.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3,fr);
    grid-template-rows: 50px 1fr 1fr 100px;
    gap: 10px;
    box-sizing: border-box;
}
.container div{
    padding: 10px;
    border: 1px solid #000000;
}
.header{
    grid-column-start: 1;
    grid-column-end: 4;
}

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <head>
      <link rel=\"stylesheet\" href=\"style.css\" />
      <title>the title idk</title>
    </head>
  </head>
  <body>
    <div class=\"container\">
      <div class=\"header\">Header</div>
      <div class=\"content-big\"></div>
      <div class=\"content-small\"></div>
      <div class=\"footer\"></div>
    </div>
  </body>
</html>

标签： html css

【解决方案1】：

问题是width: 100vw; 设置在.container 上。因为您在body 上也有margin: 10px;。所以你网站的宽度实际上是100vw + 20px 所以它溢出了。一个解决方案是简单地删除.container。

body{
    margin: 10px;
}
.container{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3,fr);
    grid-template-rows: 50px 1fr 1fr 100px;
    gap: 10px;
    box-sizing: border-box;
}
.container div{
    padding: 10px;
    border: 1px solid #000000;
}
.header{
    grid-column-start: 1;
    grid-column-end: 4;
}

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    
<link rel="stylesheet" href="style.css">
<title>the title idk</title>

</head>

<body>

    <div class="container">

        <div class="header">
            Header
        </div>
        
        <div class="content-big">
            
        </div>
        
        <div class="content-small">

        </div>

        <div class="footer">

        </div>
        
    </div>


</body>

【讨论】：