Html 内容包装器div和屏幕底部之间的间隙-但仅在特定条件下

首先，这是我的建议。 问题是包装器div没有一直延伸到屏幕的底部；包装器div和屏幕的实际底部之间有一个小间隙。但这种差距只有在某些条件下才会出现：

间隙仅出现在垂直尺寸小于某一点的屏幕/窗口上，该点的变化取决于是否有一行文字或两行或多行文字。 对于一行文字，间隙出现在614或更短的位置。对于两行或多行文本，它出现在633或更短的位置

菜单按钮是一个SSI include。本地查看菜单未显示的地方，无论有多少行文本，都没有间隙。间隙仅出现在菜单显示的上传版本上

我使用了媒体查询，这样包装器div在大于1024的屏幕上才是明显的（黑色边框，渐变页面背景色，而不是像div那样的白色）。因此，除非他们使用的屏幕宽于1024，短于633，否则任何人都不会注意到这个差距。考虑到手机、平板电脑、电脑、电视等的常见分辨率，这是不太可能的（高度小于633的所有东西的宽度也小于1024），除非他们手动调整窗口大小，使其短而宽。 所以这可能不是我需要担心的问题，但我的代码中有一些“小故障”导致了这一问题，这真的让我感到不安

以下是相关代码：

正文{
背景色：#ffffff；/*白色*/
字体大小：100%；
身高：100%；
保证金：0px 0px 0px 0px；
}
/*适用于1026px及以上屏幕*/
@媒体屏幕和（最小宽度：1025px）{
正文{背景色：#000000；/*黑色*/
背景图像：线性渐变（#ffff00，#00b300，#ffff00）}/*黄-绿-黄*/
}
#包装纸{
显示：块；
位置：相对位置；
宽度：1024px；
最大宽度：100%；
最小高度：100%；
保证金：0自动；
边际上限：0px；
边缘底部：0px；
证明内容：中心；
背景色：#ffffff；/*白色*/
填充：0px 10px 0px 10px；
框大小：边框框；
}
/*适用于1026px及以上屏幕*/
@媒体屏幕和（最小宽度：1025px）{
#包装{盒尺寸：边框盒；
左边框：3倍纯色#000000；/*黑色*/
右边框：3px实心#000000；
}
}
#缅因州{
最大宽度：99%；
保证金：0px 0px 0px 0px；
}
p{
颜色：#000000；/*黑色*/
文本对齐：居中；
字体系列：Arial，Verdana；
字号：1rem；
保证金：10px 0px 5px 0px；
}
.标题{
颜色：#0099ff；/*蓝色*/
文本对齐：居中；
字体系列：Arial，Verdana；
字号：1.87rem；
保证金：0px 0px 0px 0px；
}
div.text{
最大宽度：1000px；
}
#myBtn{
显示：无；
位置：固定；
底部：20px；
右：30px；
z指数：99；
边框：4px实心#0099ff；/*蓝色*/
边界半径：20px；
盒影：0.8px 16px 0 rgba（0,0,0,0.2），0.6px 20px 0 rgba（0,0,0.19）；
大纲：无；
背景色：#6b；/*灰色*/
颜色：#ffffff；/*白色文本*/
字体大小：13px；
字体大小：粗体；
光标：指针；
填充：10px；
}
.下拉列表{
位置：相对位置；
显示：内联块；
边缘顶部：5px；
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropbtn{
背景色：#6b；/*灰色*/
颜色：#ffffff；/*白色文本*/
最小宽度：175px；
填充：10px 10px；
字体大小：16px；
边框：4px实心#0099ff；/*蓝色*/
边界半径：20px；
光标：指针；
盒影：0.8px 16px 0 rgba（0,0,0,0.2），0.6px 20px 0 rgba（0,0,0.19）；
框大小：边框框；
}
.dropdown:悬停.dropbtn{
背景色：#6b；/*灰色*/
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#6b；/*灰色*/
宽度：95%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
边框：4px实心#0099ff；/*蓝色*/
边界半径：4px；
框大小：边框框；
z指数：1；
}
.下拉内容a:悬停{背景色：#0099ff}/*蓝色*/
.下拉内容a{
颜色：#ffffff；/*白色*/
填充物：5px；
文字装饰：无；
显示：块；
}

主页测试
主页测试
问题：如果屏幕为633或更短，包装器div不会一直向下延伸，在背景显示处可能有10个像素的间隙。间隙仅出现在上传的版本上；不显示SSI菜单的本地版本没有间隙

按钮1标签
按钮2标签
按钮3标签

//当用户从文档顶部向下滚动200px时，显示按钮
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>200 | | document.documentElement.scrollTop>200）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
//当用户单击按钮时，滚动至文档顶部
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}
页首

是一个过时的元素，不应该使用。这一直是我心中的一根刺，但没有它，我无法使.heading和菜单按钮居中。当我移除它时，这些项目会向左对齐。建议？谢谢。

是一个过时的元素，不应该使用。这一直是我心中的一根刺，但没有它，我无法使.heading和菜单按钮居中。当我移除它时，这些项目会向左对齐。建议？非常感谢。