为什么在网格模板列中显示100％的网格会消失? [英] Why display grid with 100% in grid-template-columns goes out of body?

问题描述

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:40% 60%;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}

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

如果位置不是fixed，则没有问题，但如果位置是fixed-parent在右侧不完全可见.

if position is not fixed there is no problem, but if position is fixed - parent is not entire visible on the right side.

推荐答案

问题与您认为的 width:100％无关.使用grid-template可以生成40% 60%，而您还可以使用5px的grid-gap，这将使总数超过100%.

The issue isn't with width:100% like you think. It is with grid-template that you made 40% 60% and you also have a grid-gap of 5px which will make the total more than 100%.

取而代之的是，依靠fr单元来划分可用空间:

Instead rely on the fr unit to split the free space considering the gap:

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:4fr 6fr;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}

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

这篇关于为什么在网格模板列中显示100％的网格会消失?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！