Question

所以我有this basic setup-一个画布区域和一个父网格中的动画师。父网格也位于具有1fr行的另一个网格内。我可以通过上下拖动调整大小来调整动画大小。

canvas {
  background-color: blue;
}

#grid1 {
  grid-template-rows: 1fr;
}

#grid2 {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid1">
  <div id="grid2">
    <div id="canvas-area">
      <canvas/>    
    </div>
    <div id="animator"></div>
  </div>
</div>

我希望画布大于其父元素并隐藏其溢出，但这似乎也扩展了父元素。我已经尝试过overflow: hidden，但这没用

作为附带问题：我还注意到画布下方有4px的空间，为什么？

Answer 1

我希望画布大于其父元素并隐藏其溢出，但这似乎也扩展了父元素。

通常，您需要向网格容器添加高度，以使1fr中的grid-template-rows: 1fr auto有意义。否则，网格项目会自动调整为其内容的尺寸。

将overflow: hidden添加到网格项 #canvas-area，并将固定高度添加到容器（例如，您以前的jsFiddle拥有400px）-参见下面的演示：

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 400px;
  height: 400px; /* added a fixed height */
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  overflow: hidden; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

请注意，添加min-height: 0不会增长容器：

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

为什么呢？

默认情况下，网格项目具有min-width: auto和min-height: auto（就像弹性项目一样）。您可以在下面看到这种行为的一些示例：

并根据规格：

要为网格项目提供更合理的默认最小尺寸，此   规范定义了min-width / min-height的自动值   将指定轴上的自动最小尺寸应用于网格项目   其溢出是可见的，并且至少跨越一条轨道，其最小   曲目大小调整功能是自动的。

W3C

画布元素下面的空格？

我还注意到画布下方有4px的空间，为什么？

这就是空白，它是内联元素的特征-您可以通过将其设置为块元素（添加display: block）或调整vertical-align属性（添加{ {1}}）：

vertical-align: top

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
  display: block; /* added */
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
  overflow: auto; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

如何使用1fr网格元素上隐藏的溢出

1 个答案:

为什么呢？

画布元素下面的空格？