为什么我的Grid元素的高度计算不正确? [英] Why is my Grid element's height not being calculated correctly?

问题描述

我在处理CSS网格元素的高度时遇到麻烦. 我正在使用的代码是:

I'm having trouble with a CSS grid element's height. The code I am using is:

.gridContainer {
  border: thin solid black;
  background: rgba(255, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100px;
  height: 100px;
  grid-template-areas: 'windowContentHolder';
}

.gridItem {
  grid-area: windowContentHolder;
  background: rgba(255, 255, 0, 0.5);
  width: 200%;
  height: 200%;
}

.content {
  background: rgba(255, 0, 0, 0.5);
}

<div class="gridContainer">
  <div class="gridItem">
    <div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
    </div>
  </div>
</div>

如您所见，gridItem设置为height:200%，并且预期结果与预期不符.它的高度(200px)应该是父级(100px)的两倍，滚动条会隐藏任何额外的高度，尽管height属性似乎根本没有设置.

As you can see the gridItem is set to be height:200% and the expected result is not as intended. It should be twice as high (200px) as the parent (100px), with any extra height being hidden by the scroll bar, instead though the height property doesn't seem to be setting at all.

似乎该百分比正在考虑子高度，而不是父高度，因为如果我们仔细检查该元素，我们会发现其高度是子元素高度的两倍.

It's seems like the percentage is considering the child height instead of the parent height because if we inspect closely the element we will see that its height is twice the height of the child element.

带有"hi"的元素不会像预期的那样溢出.将gridContainer更改为阻止"确实可以正常工作，但不适用于网格":

The element with 'hi' is not overflowing as would be expected. Changing the gridContainer to 'block' does work as expected, but not with 'grid':

.gridContainer {
  border: thin solid black;
  background: rgba(255, 0, 0, 0.5);
  display: block;
  width: 100px;
  height: 100px;
}

.gridItem {
  grid-area: windowContentHolder;
  background: rgba(255, 255, 0, 0.5);
  width: 200%;
  height: 200%;
  overflow: auto;
}

.content {
  background: rgba(255, 0, 0, 0.5);
}

<div class="gridContainer">
  <div class="gridItem">
    <div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
    </div>
  </div>
</div>

推荐答案

网格容器的高度固定为100px.

The height of the grid container is fixed at 100px.

网格项的高度设置为200％.

The height of the grid item is set to 200%.

网格项目存在于内部轨道中，而这些项目存在于容器内部.

A grid item exists inside tracks, which exist inside the container.

您可以将网格项视为位于容器下方两层的现有项目.

You can think of grid items as existing two levels down from the container.

换一种说法，网格项目的父项是轨道，而不是容器.

Put another way, the parent of the grid item is the track, not the container.

由于行高既不是固定的，也不是长度的真实单位-它设置为1fr–网格项目的百分比高度失败，可以根据需要随意扩展行(height: auto).

Since your row height is neither fixed or a true unit of length – it's set to 1fr – the grid item's percentage height fails and it is free to expand the row as necessary (height: auto).

无论您在容器上设置的固定高度是多少，在行上也要设置.

.gridContainer {
  border: thin solid black;
  background: rgba(255, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px;    /* adjustment; value was 1fr */
  width: 100px;
  height: 100px;
  grid-template-areas: 'windowContentHolder';
}

.gridItem {
  grid-area: windowContentHolder;
  background: rgba(255, 255, 0, 0.5);
  width: 200%;
  height: 200%;
  overflow: auto;
}

.content {
  background: rgba(255, 0, 0, 0.5);
}

<div class="gridContainer">
  <div class="gridItem">
    <div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
    </div>
  </div>
</div>

这篇关于为什么我的Grid元素的高度计算不正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！