
为什么 Grid-template-columns 中显示 100% 的网格会超出正文?
在提供的 CSS 代码中:
1 2 3 4 5 6 7 8 9 10 | <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 声明的百分比。考虑到任何定义的间隙,小数单位按比例分配空间:
1 2 3 4 5 | <code class = "css" >.parent {
...
grid-template-columns: 4fr 6fr;
...
}</code>
|
登录后复制
示例:
1 2 3 4 | <code class = "html" ><div class = 'parent' >
<div class = 'left' >LEFT</div>
<div class = 'right' >RIGHT</div>
</div></code>
|
登录后复制
通过此修改,父容器现在将在主体边界内完全可见,即使在定位固定。
以上是为什么Grid-template-columns中显示100%的网格超出了正文?的详细内容。更多信息请关注PHP中文网其他相关文章!