作者：ninjas5 | 来源：互联网 | 2022-12-07 01:05
我遇到了CSS网格元素的高度问题.我使用的代码是:
.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);
}
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
如您所见,gridItem设置为height:200%,预期结果不符合预期.它应该是200px父(100px)的两倍(),滚动条隐藏任何额外的高度,而高度属性似乎根本没有设置.
似乎百分比正在考虑子高度而不是父高度,因为如果我们仔细检查元素,我们将看到它的高度是子元素高度的两倍.
带有'hi'的元素没有像预期的那样溢出.更改gridContainer为'block'确实可以正常工作,但不能使用'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);
}
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
1> Michael_B..：
网格容器的高度固定为100px.
网格项的高度设置为200%.
轨道内存在网格项,它存在于容器内.
您可以将网格项视为从容器中向下存在的两个级别.
换句话说,网格项的父级是轨道,而不是容器.
由于您的行高既不是固定的,也不是真正的长度单位 - 它设置为1fr- 网格项的百分比高度失败,并且可以根据需要自由扩展行(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);
}
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
京公网安备 11010802041100号