Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何按单个单元格而不是按内容最多的单元格调整CSS网格行的大小_Css - Fatal编程技术网

如何按单个单元格而不是按内容最多的单元格调整CSS网格行的大小

如何按单个单元格而不是按内容最多的单元格调整CSS网格行的大小,css,Css,我有一个CSS网格,其中除了最后一行使用minmax(26rem,auto)调整大小外,其他行的大小都是固定的。此行中的第一个单元格具有动态内容,当列的宽度缩小时,可以增加行的高度。这可以很好地工作,但是当包含行的最后一个单元格(高内容单元格)时,它的内容太多,并强制自动生成行。高内容单元格是可滚动的,因此不需要显示所有内容 我将高内容单元格放在一个具有最大高度的div中,并在屏幕变小时(大约在动态单元格内容更改时)使用媒体查询来增加高度。这是可以的,但它不是最平滑的过渡,因为它基于屏幕宽度,所

我有一个CSS网格,其中除了最后一行使用minmax(26rem,auto)调整大小外,其他行的大小都是固定的。此行中的第一个单元格具有动态内容,当列的宽度缩小时,可以增加行的高度。这可以很好地工作,但是当包含行的最后一个单元格(高内容单元格)时,它的内容太多,并强制自动生成行。高内容单元格是可滚动的,因此不需要显示所有内容

我将高内容单元格放在一个具有最大高度的div中,并在屏幕变小时(大约在动态单元格内容更改时)使用媒体查询来增加高度。这是可以的,但它不是最平滑的过渡,因为它基于屏幕宽度,所以查询不一定在第一个单元格的内容更改的同时触发

我想知道是否有一种方法可以根据动态单元格的内容而不是最大内容单元格的内容来调整行的大小

我在这里包括了下面的代码和js fiddle。 查看我所描述的效果的最简单方法是运行代码段,使其全屏显示并更改浏览器宽度(或使用开发工具更改视口大小)

/*网格*/
.电网{
显示:网格;
网格间距:0;
网格模板柱:1fr 1fr;
网格模板行:6rem最小值(26rem,自动);
证明项目:中心;
}
/*细胞*/
h_细胞{
边框:1px纯黑;
宽度:100%;
身高:100%;
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
}
/*动态单元样式*/
.flex_空间{
显示器:flex;
证明内容:周围的空间;
柔性包装:包装;
}
.复选框{
边框:纯黑;
最小宽度:10雷姆;
边缘底部:1rem;
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
}
/*高内容单元格样式*/
.子窗体\u外部{
位置:相对位置;
填充:0;
溢出:自动;
边缘底部:10px;
宽度:100%;
身高:26雷姆;
}
@介质(最大宽度:1200px){
.子窗体\u外部{
身高:100%;
}
}
.子窗体\u内容
{
填充:10px;
高度:500px;
}
/*列表样式-可能可以忽略*/
运输署
{
字号:10pt;
边框:实心1px#888;
填充物:5px;
最小宽度:33px;
}
.row_风格{
右边界:0;
填充:0;
左边框宽度:1px;
左边框颜色:#888;
}
.列表\行\检查
{
边界:0;
最小宽度:10px;
}
.列表\行\控件
{
边界:0;
文本对齐:右对齐;
右边填充:0;
}
.列表\行\控制输入
{
最小宽度:70px;
}
.end_row_样式{
边界:0;
左边距:1px;
左边框:1px实心#888;
最小宽度:53px;
}
p{
保证金:0;
}

字幕
号码
字幕
号码
动态单元
AA
A

B

C

BB D

E

F

科科斯群岛 G

H

I

DD J

K

L

M

N

EE O

p

Q

R

高含量电池 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本