Why can't I get my HTML element to stay at the bottom of the page?
Question
I've tried multiple methods of getting this to work but nothing has.
Here is my HTML:
here's a jsfiddle for simplicity https://jsfiddle.net/w1z9bahv/23/
I cannot figure out why I can't get the footer to stay at the bottom. I've tried changing the dark mode features in JavaScript, I've tried multiple different methods of positioning the element on the bottom.
Once I activate dark mode, my footer will shoot up and be in the middle of the page. I just want it to stay at the bottom.
Here's my current code:
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>
If there is a better way to add a dark mode feature that would be helpful too :)
Thanks
2 answers
solution1
1 2018-09-10 22:10:09
Using padding instead of margin will allow more control over the footer. You can still achieve the "margin" affect with using box-sizing:border-box; on body with padding:100px; .
The filter you added to body is affecting the fixed positioning of the footer. The effect is documented here . To bypass the effect, create another div containing everything on the page except the footer. Anything for which you want fixed positioning cannot be within a container with a filter or transformation. Therefore, using a container for everything that isn't fixed and putting all fixed positioned things outside of the container will isolate the filter from affecting the footer. To still achieve the filter on the footer, I kept the code that altered its class so that the footer itself received the filter and not through inheritance. Hopefully this makes sense but let me know if you don't understand.
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>
solution2
1 2018-09-10 23:32:35
You can try the following:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.