时间戳

首页 > 解决方案 > 如何阻止 css 网格宽度超出屏幕宽度，以及浏览器如何计算 css-grid 宽度？

html - 如何阻止 css 网格宽度超出屏幕宽度，以及浏览器如何计算 css-grid 宽度？

问题描述

我有以下内容：

<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)。我所期待的是将右侧列固定在右侧边缘。我究竟做错了什么？

在这种情况下，浏览器如何计算整体宽度？

标签： htmlcsscss-grid

解决方案

那么，发生了什么是你给你的网格 100vw，意思是，它将是视口宽度的 100%，对吧？好吧，默认情况下，body 周围有边距，所以，你的网格将是 100vw，但是因为你在 body 中有边距，网格似乎离开了屏幕。

因此，您需要做的是重置布局：

*{
  margin:0;
  padding: 0;
}

然后，只需在网格元素中应用所需的边距和填充。

您可能可以按照我创建的 codepen 的方式进行操作： https ://codepen.io/pedro-figueiredo/pen/EBaGOg

推荐阅读