为什么我不能让我的 HTML 元素停留在页面底部？

我已经尝试了多种方法来使其工作，但没有任何方法。

这是我的 HTML：

这是一个JSFIDDLE为了简单起见 https://jsfiddle.net/w1z9bahv/23/

我不知道为什么我不能让footer留在底部。我尝试过更改 JavaScript 中的暗模式功能，我尝试了多种不同的方法将元素定位在底部。

激活深色模式后，我的页脚将弹出并位于页面中间。我只是希望它留在底部。

这是我当前的代码：

var darkModeOn = false;
function darkMode() {
var element = document.body;
var footer = document.getElementById("bottomText");
if (darkModeOn == false) {
document.getElementById("darkMode").innerHTML = "Light mode";
darkModeOn = true;
} else {
document.getElementById("darkMode").innerHTML = "Dark mode";
darkModeOn = false;
}
element.classList.toggle("darkMode");
footer.classList.toggle("darkMode");
}

body {
position: relative;
background-color: white;
margin: 100px;
filter: invert(0%);
}
body.darkMode {
position: relative;
margin: 100px;
background-color: #222;
filter: invert(100%);
}
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer.darkMode {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}

<html>
<body>
<p>
Here is some irrelevant text
</p>
<button>
Here is an irrelivant button
</button>
<footer id="bottomText">
<span>here is my footer</span>
<span>why is it not on the bottom</span>
<span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
</footer>
</body>
</html>

如果有更好的方法来添加暗模式功能，那也会有所帮助:)

谢谢

您可以尝试以下操作：

var darkModeOn = false;
function darkMode() {
var element = document.body;
var footer = document.getElementById("bottomText");
var buttonToInvert = document.getElementById("buttonToInvert");
if (darkModeOn == false) {
footer.innerHTML = "Light mode";
darkModeOn = true;
} else {
footer.innerHTML = "Dark mode";
darkModeOn = false;
}
element.classList.toggle("darkMode");
buttonToInvert.classList.toggle("darkMode");
}

body {
background-color: white;
margin: 100px;
}
body.darkMode {
margin: 100px;
background-color: #222;
}
button.buttonToInvert{
filter: invert(0%);
}
button.darkMode{
filter: invert(100%);
}
footer {
/*Do the font (maybe)*/
position: fixed;
left: 0;
right: 0;
bottom: 0;
}

<html>
<head>
</head>
<body>
<p>
Here is some irrelevant text
</p>
<button id="buttonToInvert">
Here is an irrelivant button
</button>
<footer>
<span>here is my footer</span>
<span>why is it not on the bottom</span>
<span><u id="bottomText" onclick="darkMode()">Dark mode</u></span>
</footer>
</body>
</html>

使用填充而不是边距将允许对页脚进行更多控制。您仍然可以通过在身体上使用box-sizing:border-box;来实现"边距"效果padding:100px;.

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

var darkModeOn = false;
function darkMode() {
var element = document.getElementById('filterContainer');
var footer = document.getElementById("bottomText");
if (darkModeOn == false) {
document.getElementById("darkMode").innerHTML = "Light mode";
darkModeOn = true;
} else {
document.getElementById("darkMode").innerHTML = "Dark mode";
darkModeOn = false;
}
element.classList.toggle("darkMode");
footer.classList.toggle("darkMode");
}

html,body {
margin:0;
padding:0;
}
#filterContainer{
background-color:white;
padding:100px;
box-sizing:border-box;
filter:invert(0%);
height:200vh;
}
.darkMode{
filter:invert(100%) !important;
}
footer {
/*Do the font (maybe)*/
position: fixed;
left: 0;
right: 0;
bottom: 0;
}

<html>
<head>
</head>
<body>
<div id="filterContainer">
<p>
Here is some irrelevant text
</p>
<button>
Here is an irrelivant button
</button>
</div>
<footer id="bottomText">
<span>here is my footer</span>
<span>why is it not on the bottom</span>
<span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
</footer>
</body>
</html>

相关内容

最新更新

热门标签：