首页  >  文章  >  web前端  >  为什么Grid-template-columns中显示100%的网格超出了正文?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-01 04:39:27571浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn