Html 如何停止详细信息部分扩展页面长度？

我的页面上有多个详细信息部分，每次打开一个详细信息部分，它都会略微扩展我的页面，尽管在详细信息部分关闭时它不会返回。我已经准备好了这些部分，所以我现在不想把它们换掉。当我开始这个网站时，我想尽量避免使用引导，但我想这会容易得多。谢谢

.main容器{
显示：网格；
网格模板列：1fr；
网格模板行：1fr 1fr；
栅柱间隙：1米；
网格行间距：1米；
高度：600px；
保证金：0自动；
自我辩护：中心；
边缘底部：-1米；
}
.btn1{
宽度：18em；
背景：无；
盒影：0px 0px 0px透明；
边框：0px实心透明；
文本阴影：0px 0px 0px透明；
}
.卡片{
宽度：18em；
自我辩护：中心；
保证金：0；
填充：2米1米0；
}
.卡img{
保证金：0.5px 0；
宽度：18em；
高度：自动；
}
总结{
宽度：18em；
字体大小：粗体；
字体系列：monospace；
字号：1.2rem；
文本转换：大写；
文本对齐：居中；
保证金：0；
填充：0；
颜色：#202020；
背景#8080；
光标：指针；
边框左下半径：7px；
边框右下半径：7px；
}
摘要：：-webkit详细信息标记{
显示：无；
}
.fa.fa-角度向下{
转换：.15秒转换易进易出；
}
详细信息[打开].fa.fa-angle-down{
变换：旋转（180度）translateY（-0.2米）；
}
摘要：焦点{
轮廓样式：无；
背景：404040；
颜色：#fef；
}
细节{
最大高度：400px；
宽度：17.55em；
颜色：#fef；
背景:#212529；
边框底部：1px实心rgba（25022466.45）；
边框左下半径：7px；
边框右下半径：7px；
填充：0；
边缘：-.25em 0-2em；
右边框：实心1px#b5；
边框底部：实心1px#b5；
}
李先生{
填充：1em；
}

挖掘机


180°轮式
360°轮式
360°跟踪

推土机


180°轮式
360°轮式
360°跟踪

电传操纵器


180°轮式
360°轮式
360°跟踪

您实际上是在更改高度，因此页面自然会变长。如果你想让这些“部分”不影响布局，你可能必须绝对定位它们。好的，我会试试看，尽管我不确定如何使用CSS网格。我已经在Firefox、Chrome和Safari（都在Mac上）上测试了这段代码。在这三种情况下，当展开详细信息时，页面的高度会增加；在这三种情况下，当详细信息部分折叠时，页面的高度会恢复到以前的高度。但我看到了一个问题。在Firefox中，每个图像的顶部都有一个三角形，可以旋转出底部的细节，但是细节被切掉了。在Safari和Chrome中，没有完全显示三角形和细节。你想要一个三角形来处理细节，还是不？谢谢你，在我的chrome本地文件中，我不是这样的。我已经编辑了代码，因为我忘了包含字体很棒的样式表链接。样式应为摘要部分上方的图像，摘要文本下方有旋转箭头。我将原始webkit箭头显示设置为“无”，因为它们位于图像的顶部。实际上，您正在更改高度，因此页面自然会变长。如果你想让这些“部分”不影响布局，你可能必须绝对定位它们。好的，我会试试看，尽管我不确定如何使用CSS网格。我已经在Firefox、Chrome和Safari（都在Mac上）上测试了这段代码。在这三种情况下，当展开详细信息时，页面的高度会增加；在这三种情况下，当详细信息部分折叠时，页面的高度会恢复到以前的高度。但我看到了一个问题。在Firefox中，每个图像的顶部都有一个三角形，可以旋转出底部的细节，但是细节被切掉了。在Safari和Chrome中，没有完全显示三角形和细节。你想要一个三角形来处理细节，还是不？谢谢你，在我的chrome本地文件中，我不是这样的。我已经编辑了代码，因为我忘了包含字体很棒的样式表链接。样式应为摘要部分上方的图像，摘要文本下方有旋转箭头。我将原始webkit箭头显示设置为“无”，因为它们位于图像顶部。