Javascript 如何增加分区大小以适应窗体、图库或大型元素？

因此，我的课堂网站几乎处于开发的最后阶段，但我需要一些修复。顺便说一句，谢谢你们这些天和我分享的所有知识。因此，我使用gsap js函数在我的页面中创建了一个分区之间的叠加效果，当我以合理的大小编写或添加内容时，一切都很好，但是当我尝试添加图库或表单时，在这种情况下，我似乎找不到增加分区大小或使其适合的任何方法。我尝试过使用height属性、padding、margin和line height，但似乎没有任何效果。你能帮我解决这个问题吗？谢谢大家!！下面的片段：

const form=document.getElementById（'form'）；
const username=document.getElementById（'username'）；
const email=document.getElementById（'email'）；
const direccion=document.getElementById（'direccion'）；
const telefono=document.getElementById（'telefono'）；
form.addEventListener（'submit'，e=>{
e、 预防默认值（）；
检查输入（）；
});
函数checkInputs（）{
var usernameValue=username.value.trim（）；
var emailValue=email.value.trim（）；
var direccionValue=direccion.value.trim（）；
var telefonoValue=telefono.value.trim（）；
如果（usernameValue==''）{
setErrorFor（用户名“introwzca un nombre，por favor”）；
}否则{
setSuccessFor（用户名）；
}
如果（emailValue==''）{
setErrorFor（电子邮件，“介绍联合国电子邮件，请帮忙”）；
}如果（！isEmail（emailValue））{
setErrorFor（电子邮件“El email Introducto no es valido，intentelo de nuevo”）；
}否则{
setSuccessFor（电子邮件）；
}
如果（direccionValue==''）{
setErrorFor（direccion，“introwsca una direccion，por four”）；
}否则{
setSuccessFor（direccion）；
}
如果（telefonoValue==''）{
setErrorFor（telefono，意为“介绍一个电话号码，请帮忙”）；
}else if（telefono.value.length！==9）{
setErrorFor（telefono，“Su numero no tiene la longitud adecuada”）；
}否则{
设置成功（telefono）；
}
}
函数setErrorFor（输入、消息）{
const formControl=input.parentElement；
constsmall=formControl.querySelector（'small'）；
formControl.className='form control error'；
small.innerText=消息；
}
函数setSuccessFor（输入）{
const formControl=input.parentElement；
formControl.className='form control success'；
}
功能电子邮件（电子邮件）{
返回/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.]124；（[a-zA Z-0-9]++]2，$/.test；
}
gsap.registerPlugin（滚动触发器）；
gsap.utils.toArray（'.segmento'）.forEach（section=>{
ScrollTrigger.create({
触发器：第节，
开始：'顶端'，
宾：是的，
引脚间距：false
});
});
html{
滚动行为：平滑；
}
.navbar nav>li{
左侧填充：20px；
右边填充：20px；
}
导航{
背景色：#000033；
不透明度：0.95；
}
.cookie容器{
位置：固定；
底部：-100%；
左：0；
右：0；
背景：#2f3640；
颜色：#f5f6fa；
填充：15px 32px；
盒影：0-2px16pxRGBA（47,54,64,0.151）；
过渡时间：400ms；
}
.cookie容器a{
颜色：#f5f6fa；
}
.cookie-container.active{
底部：0；
}
.cookie btn{
背景：#e84118；
边界：0；
颜色：#f5f6fa；
填充：12px 48px；
字号：18px；
边缘底部：16px；
边界半径：8px；
光标：指针；
}
.右栏{
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：2rem；
}
.左栏{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
调整项目：灵活启动；
颜色：#000；
填充：0rem2rem；
}
.列左h1{
边缘底部：3rem；
字号：2rem；
字体：斜体；
}
.列左p{
边缘底部：2rem；
字号：2rem；
线高：1.1；
}
.正常列{
垂直对齐：中间对齐；
文本对齐：居中；
字体大小：3rem；
}
.柱法线p{
边缘底部：2rem；
字号：4rem；
线高：4；
}
.column normal.image{
宽度：100%；
身高：100%；
最大宽度：750px；
最大高度：400px；
}
.集装箱{
保证金：0；
填充：0；
框大小：边框框；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
A.分段{
背景#EC96D3；
}
库托先生{
背景：#66488f；
}
部分{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Roboto”，无衬线；
高度：100vh；
位置：静态；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
身体{
溢出x：隐藏；
}
第二节集装箱{
显示：网格；
网格模板柱：1fr 1fr；
高度：95vh；
填充：3rem计算（（100vw-1300px）/2）；
}
第二节集装箱{
显示：块；
填充：3rem计算（（100vw-1300px）/2）；
高度：50vh；
}
第2节集装箱{
显示：块；
填充：3rem计算（（100vw-1300px）/2）；
高度：800vh；
背景色：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（0,0,0,0.3）；
溢出：隐藏；
宽度：400px；
最大宽度：100%；
}
第2节集装箱{
填充：3rem计算（（100vw-1300px）/2）；
}
.画廊容器{
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（3300px）；
宽度：80%；
保证金：100像素自动；
}
.多媒体资料容器.多媒体资料卡{
溢出：隐藏；
}
.多媒体资料容器.多媒体资料卡a>img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
过渡：0.5s；
}
.多媒体资料容器.多媒体资料卡a{
宽度：100%；
身高：100%；
}
.多媒体资料容器.多媒体资料卡a>img:悬停{
转换：比例（1.5）；
}
第节集装箱运输{
显示：块；
填充：3rem计算（（100vw-1300px）/2）；
高度：60vh；
}
第节.案文{
颜色：#fff；
}
第三节图像{
宽度：100%；
身高：100%；
最大宽度：750px；
最高高度：4