为什么Grid-template-columns中显示100%的网格超出了正文？-css教程-PHP中文网

为什么Grid-template-columns中显示100%的网格超出了正文？

Mary-Kate Olsen

发布： 2024-11-01 04:39:27

原创

698 人浏览过

Why Does Display Grid with 100% in Grid-template-columns Exceed the Body?

为什么 Grid-template-columns 中显示 100% 的网格会超出正文？

在提供的 CSS 代码中：

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

登录后复制

该问题不是由 width: 100% 属性引起的，而是由 grid-template-columns 设置引起的。当指定百分比（40% 和 60%）和网格间隙（5px）时，总宽度超过 100%。这会导致固定定位时父容器超出主体的右边缘。

解决方案：使用 fr 单位

要解决此问题，建议使用小数单位 (fr) 而不是grid-template-columns 声明的百分比。考虑到任何定义的间隙，小数单位按比例分配空间：

<code class="css">.parent {
  ...
  grid-template-columns: 4fr 6fr;
  ...
}</code>

登录后复制

示例：

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

登录后复制

通过此修改，父容器现在将在主体边界内完全可见，即使在定位固定。

以上是为什么Grid-template-columns中显示100%的网格超出了正文？的详细内容。更多信息请关注PHP中文网其他相关文章！