Javascript 为什么可以'；我不能让我的HTML元素停留在页面底部吗？

我尝试了多种方法让它工作，但都没有成功

这是我的HTML：

为了简单起见，这里有一个JSFIDLE

我不明白为什么我不能让

页脚保持在底部。我尝试了改变JavaScript中的暗模式特性，尝试了多种不同的方法将元素定位在底部

一旦我激活黑暗模式，我的页脚就会开到页面中间。我只想让它保持在底部

以下是我当前的代码：


var darkModeOn=false；
函数darkMode（）{
var元素=document.body；
var footer=document.getElementById（“bottomText”）；
if（暗模式==false）{
document.getElementById（“darkMode”）.innerHTML=“灯光模式”；
暗模式=真；
}否则{
document.getElementById（“暗模式”）.innerHTML=“暗模式”；
暗模式=假；
}
element.classList.toggle（“暗码”）；
footer.classList.toggle（“暗码”）；
}
正文{
位置：相对位置；
背景色：白色；
利润率：100像素；
过滤器：倒置（0%）；
}
body.darkMode{
位置：相对位置；
利润率：100像素；
背景色：#222；
过滤器：倒置（100%）；
}
页脚{
位置：固定；
左：0；
右：0；
底部：0；
}
footer.darkMode{
位置：固定；
左：0；
右：0；
底部：0；
}


这里有一些不相关的文本

这是一个不可拆卸的按钮
这是我的页脚
为什么它不在底部
暗模式
使用填充而不是边距可以更好地控制页脚。您仍然可以使用
框大小：边框框实现“边距”效果填充的机身上的code>：100px

添加到正文的筛选器影响页脚的固定位置。这种影响是有案可查的。要绕过此效果，请创建另一个div，其中包含页面上除页脚以外的所有内容。任何需要固定定位的内容都不能位于带有过滤器或转换的容器中。因此，对所有未固定的内容使用容器，并将所有固定位置的内容放在容器外部，将隔离过滤器，使其不会影响页脚。为了仍然在页脚上实现过滤器，我保留了更改其类的代码，以便页脚本身接收过滤器，而不是通过继承。希望这是有道理的，但如果你不明白，请告诉我


var darkModeOn=false；
函数darkMode（）{
var元素=document.getElementById（'filterContainer'）；
var footer=document.getElementById（“bottomText”）；
if（暗模式==false）{
document.getElementById（“darkMode”）.innerHTML=“灯光模式”；
暗模式=真；
}否则{
document.getElementById（“暗模式”）.innerHTML=“暗模式”；
暗模式=假；
}
element.classList.toggle（“暗码”）；
footer.classList.toggle（“暗码”）；
}
html，正文{
保证金：0；
填充：0；
}
#过滤容器{
背景色：白色；
填充：100px；
框大小：边框框；
过滤器：倒置（0%）；
高度：200vh；
}
.darkMode{
过滤器：反转（100%）！重要；
}
页脚{
/*做字体（可能）*/
位置：固定；
左：0；
右：0；
底部：0；
}


这里有一些不相关的文本

这是一个不可拆卸的按钮
这是我的页脚
为什么它不在底部
暗模式
使用填充而不是边距可以更好地控制页脚。您仍然可以使用
框大小：边框框实现“边距”效果填充的机身上的code>：100px

添加到正文的筛选器影响页脚的固定位置。这种影响是有案可查的。要绕过此效果，请创建另一个div，其中包含页面上除页脚以外的所有内容。任何需要固定定位的内容都不能位于带有过滤器或转换的容器中。因此，对所有未固定的内容使用容器，并将所有固定位置的内容放在容器外部，将隔离过滤器，使其不会影响页脚。为了仍然在页脚上实现过滤器，我保留了更改其类的代码，以便页脚本身接收过滤器，而不是通过继承。希望这是有道理的，但如果你不明白，请告诉我


var darkModeOn=false；
函数darkMode（）{
var元素=document.getElementById（'filterContainer'）；
var footer=document.getElementById（“bottomText”）；
if（暗模式==false）{
document.getElementById（“darkMode”）.innerHTML=“灯光模式”；
暗模式=真；
}否则{
document.getElementById（“暗模式”）.innerHTML=“暗模式”；
暗模式=假；
}
element.classList.toggle（“暗码”）；
footer.classList.toggle（“暗码”）；
}
html，正文{
保证金：0；
填充：0；
}
#过滤容器{
背景色：白色；
填充：100px；
框大小：边框框；
过滤器：倒置（0%）；
高度：200vh；
}
.darkMode{
过滤器：反转（100%）！重要；
}
页脚{
/*做字体（可能）*/
位置：固定；
左：0；
右：0；
底部：0；
}


这里有一些不相关的文本

这是一个不可拆卸的按钮
这是我的页脚
为什么它不在底部
暗模式
您可以尝试以下方法：


var darkModeOn=false；
函数darkMode（）{
var元素=document.body；
var footer=document.getElementById（“bottomText”）；
var buttoninvert=document.getElementById（“buttonInvert”）；
if（暗模式==false）{
footer.innerHTML=“灯光模式”；
暗模式=真；
}否则{
footer.innerHTML=“暗模式”；
暗模式=假；
}
element.classList.toggle（“暗码”）；
ButtonInvert.classList.toggle（“暗码”）；
}
正文{
背景色：白色；
M