logo标签列表

如何防止CSS网格宽度超出屏幕宽度，并且浏览器如何计算CSS网格宽度？

htmlcsscss-grid
3

我有以下内容：

<html>
<head>
<style>
  #outer-grid {
    display: grid;
    grid-gap:0vh;
    grid-template-columns: repeat(2, 1fr) 30px;     /*also tried auto in place of 1fr*/
    grid-template-rows: repeat(2,1fr);
    height: 100vh;
    width: 100vw;
    position: absolute;

  }
</style>
</head>
<body>
<div id='outer-grid'>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
</div>
</body>
</html>

这会导致内容超出屏幕宽度，并添加滚动条（Firefox）。我期望的是右侧列固定在右边缘。我做错了什么？
浏览器在这种情况下如何计算总宽度？
1
请查看强制CSS网格容器填充设备全屏。 - Cray
1
你需要绝对定位吗？我把它移除了，现在它可以正常工作了。 - Jabberwocky
1
@Jabberwocky 谢谢，可能不需要了... - Lee
1
将“position”和“change width: 100vw”更改为“width: 100％”，然后您就可以继续了。 - Jabberwocky
1
重置边距或将 top:0;left:0 添加到绝对定位元素。 - Temani Afif
显示剩余5条评论
2个回答
3

所以，发生的情况是你给你的网格100vw，也就是说，它将占用视口的100％宽度，对吧？好的，但是默认情况下，body周围有边距，因此，你的网格将是100vw，但由于body有边距，网格似乎超出了屏幕。

因此，为了重置布局，你需要做的是：

*{
  margin:0;
  padding: 0;
}

接下来，在网格元素中应用所需的边距和填充即可。

您可以参考我创建的CodePen示例：

https://codepen.io/pedro-figueiredo/pen/EBaGOg
-3

试试这个

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

请参考this了解响应式设计。
谢谢，但不幸的是那对我不起作用。 - Lee
为什么发生了什么？ - sidrao2006
同样的事情（添加滚动条，超出宽度的内容）。这对你有用吗？ - Lee
我不使用Firefox，但响应式设计应该可以正常工作。我已经在Chrome中尝试过响应式设计。 - sidrao2006
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接