Html 在响应性网站上调整柔性页脚位置（带有“translatedY”子元素）

我试图用这些前提做一个粘脚：

• 页脚位置：固定
• 其全局高度根据以下情况变化：
  • 用户添加了多少子菜单项（可能会有所不同）
  • 媒体查询（更改字体大小）
  • 字体大小（以视口单位“vw”表示）

有两个特定的媒体实例可更改字体大小：

• 980px以下设备/屏幕的一次媒体查询
• 一个用于1550px以上的设备/屏幕

我试图将页脚始终放在页面底部，同时将其子元素集中在页脚上方。但是.sub菜单项的数量迫使页脚的高度增加；似乎这还不够，视口宽度正在更改字体大小，这也会影响元素的高度。

h1{
字体大小：4vw；
字母间距：0.02em；
}
h2、h3、ul子菜单{
字体大小：2.3vw；
线高：1.4em；
颜色：黑色；
}
.页脚菜单{
底部：0vh；
左：0vw；
位置：固定；
宽度：95vw；
右：5vw；
高度：55vh；/*这似乎有帮助，但不够可靠*/
z指数：999；
}
.ul{
证明内容：之间的空间；
显示器：flex；
}
.菜单项>ul.子菜单{
填充：1vh；
文本对齐：居中；
弯曲方向：立柱；
不透明度：1；
过渡：0.5s缓解；
}
.menu>.menu项：不（：第一个子项）：不（：最后一个子项），.menu项：不（：第一个子项）：不（：最后一个子项）>ul.sub-menu{
文本对齐：居中！重要；
弹性：0133%；
-webkit-flex:0133%；
}
.menu>.menu项：第一个子菜单，.menu项：第一个子菜单>ul.sub菜单{
文本对齐：左！重要；
弹性：0133%；
-webkit-flex:0133%；
}
.menu>.menu项：最后一个子菜单，.menu项：最后一个子菜单>ul.sub-menu{
文本对齐：对！重要；
弹性：0133%；
-webkit-flex:0133%；
}
/*从这里开始，我将子菜单项向上翻译*/
.footermenu.菜单项：不（：第一个子项）：不（：最后一个子项）>ul.sub-menu{
-webkit转换：translateY（计算（-100%-15vh））；
转换：translateY（计算（-100%-15vh））；
}
.footermenu.菜单项：第一个子菜单>ul子菜单{
-webkit转换：translateY（计算（-100%-15vh））；
转换：translateY（计算（-100%-15vh））；
}
.footer菜单。菜单项：最后一个子菜单>ul子菜单{
-webkit转换：translateY（计算（-100%-15vh））；
转换：translateY（计算（-100%-15vh））；
}
@媒体屏幕和屏幕（最大宽度：980px）{
h1{
字体大小：6vw；
字母间距：0.02em；
}
h2、h3、ul子菜单a{
字体大小：3.6vw；
线高：1.2米；
颜色：黑色；
}
#内容{
保证金：自动；
宽度：68vw
边际上限：25vh；
}
}
@媒体屏幕和屏幕（最小宽度：1550px）{
h1{
字体大小：3.5vw；
字母间距：0.02em；
}
h2、h3、ul子菜单a{
字体大小：2.3vw；
线高：1.2米；
颜色：黑色；
}
.入职后内容{
边缘顶部：1.5em；
文本对齐：左对齐；
-webkit列计数：1；/*Chrome、Safari、Opera*/
-moz列计数：1；/*Firefox*/
列数：1；
}
.页脚菜单{
z指数：999；
高度：18vh！重要；/*我正试图像这样解决问题，但如前所述，这是不安全的*/
}
.post.entry内容{
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}	
#内容{
保证金：自动；
宽度：68vw；
边际上限：25vh；
}
}

我认为您不需要在这里使用转换。只需在主菜单标题

希望它有意义。如果需要更多帮助，请告诉我

另外，我想我在另一个问题中帮助你解决了菜单的左、中、右对齐问题。不是吗？：）
 我认为您不需要在这里使用transform。只需在主菜单标题

希望它有意义。如果需要更多帮助，请告诉我

另外，我想我在另一个问题中帮助你解决了菜单的左、中、右对齐问题。不是吗？：）
 在没有详细说明您的具体需求的情况下，我认为您基本上希望菜单是一个拙劣的东西

因为您使用的是flexbox，所以只需使用
flex direction:column reverse

一个普遍的例子


*{
保证金：0；
填充：0；
}
a{
颜色：黑色；
文字装饰：