在提供的 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) 而不是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中文网其他相关文章!