Question

我已经尝试了多种方法来使它起作用，但是什么也没有。

这是我的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>

如果有更好的方法来添加暗模式功能，这也会有所帮助：）

谢谢

Answer 1

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

添加到主体的过滤器会影响页脚的固定位置。该效果已记录在here中。要绕过效果，请创建另一个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>

Answer 2

您可以尝试以下操作：

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>

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

2 个答案: