display grid and position fixed 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>

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

回答1:

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%.

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>

回答2:

total 8px border horizontally including 5px gap making this problem.

.parent{
position:fixed;
width:100%;
left:0; top:14px;
display:grid;
grid-template-columns:40% 60%;

background:#eee;
}

.left{
border:2px solid red;
}

.right{
border:2px solid red;
margin-left:5px;
}

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

来源：https://stackoverflow.com/questions/52113420/display-grid-and-position-fixed-goes-out-of-body

标签

html

css

css-grid