I am trying to create a footer that sinks to the bottom only when there isn't enough content to push it there. I have coded something that works at my resolution, but at different resolutions it breaks it.
I suspect because vh unit. I cannot set it to 100vh because my header is messing it up. Therefore, at different resolutions that footer isn't where it is supposed to be. I have tried to set the min-height: 100%, but that doesn't even function at all.
Furthermore, I have tried media queries but I want something more dynamic.
document.querySelectorAll(".collapsible").forEach((coll) => {
coll.addEventListener("click", () => {
coll.classList.toggle("active");
const content = coll.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
content.style.borderWidth = 0;
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.style.borderWidth = "1px";
}
});
});.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition:
border 0.2s ease-out,
max-height 0.2s ease-out;
background-color: white;
border: 0px solid #D1D3D4;
border-radius: 6px;
font-size: 13px;
}
.collapsible {
background-color: white;
color: #021032;
cursor: pointer;
padding-left: 17px;
padding-top: 10px;
padding-bottom: 8px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
font-weight: 600;
outline: none;
font-size: 17px;
margin: 5px 0px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
}
.icon {
background-image: url("../images/upArrow.svg");
background-repeat: no-repeat;
background-size: 25px;
height: 25px;
width: 25px;
transition: rotate .25s ease-in-out;
flex: 0 0 auto;
float: right;
}
.header > p:last-child {
margin-bottom: 45px;
}
.content > p:nth-child(1) {
margin-top: 14px;
}
.column > ul:nth-child(1) {
margin-top: 6px;
}
.column > ol:nth-child(1) {
margin-top: 6px;
}
.column > p:nth-child(1) {
margin-top: 12px;
}
.column > a:nth-child(1) > img:nth-child(1) {
margin-top: 3px;
}
.columnAlt > a:nth-child(1) > img:nth-child(1) {
margin-top: 3px;
}
.content > a:nth-child(1) > img:nth-child(1) {
margin-top: 3px;
}
h1 {
margin: 0px;
}
.home {
margin-left: 16%;
text-decoration: none;
color: #021032;
font-size: 80%;
font-weight: 600;
}
.banner {
display: flex;
}
#logo {
max-width: 200px;
padding-left: 16%;
padding-bottom: 9px;
margin-top: 17px;
}
.mainInformation {
margin: auto;
width: 55%;
}
div > a > img {
min-width: 100%;
max-width: 100%;
padding: 10px;
border-radius: 20px;
}
li {
padding: 5px;
}
.column {
float: left;
width: 50%;
}
.columnAlt {
float: left;
width: 49%;
}
.divider {
float: left;
width: 2%;
}
button.active > .icon {
rotate: 180deg;
}
/* Bellow section is only for stylising*/
a {
color: black;
}
h1 {
color: #021032;
margin-top: 30px;
margin-bottom: 5px;
}
.subInfo {
color: #021032;
font-size: 13px;
}
#backArrow {
width: 15px;
height: 15px;
padding: 0px;
padding-right: 2px;
position: relative;
top: 3px;
}
button:disabled {
background-image: hidden;
height: 45px;
margin-bottom: 5px;
}
.footer {
color: #D1D3D4;
font-size: 13px;
padding-bottom: 0px;
}
.footer > p {
margin-bottom: 2.8px;
}
.footer > p:last-child {
margin-bottom: 30px;
}
.caution {
color: red;
}
.error {
color: red;
}
.correct {
color: #2fdf59;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
ol {
padding-left: 20px;
}
html {
overflow-y: scroll;
}
hr {
margin-bottom: 15px;
border-top: 1px solid #D1D3D4;
}
.mainInformation {
display: flex;
min-height: 74.5vh;
flex-direction: column;
}
.footer {
margin-top: auto;
} <a href="../mainpage.html"> <img src="../images/nanosonics-colour.png" alt="Picture of Nanosonics logo" id="logo"> </a>
<hr>
<a href="../mainpage.html" class="home"> <img src="../images/arrowBack.svg" alt="Back Arrow" id="backArrow">Home</a>
<div class="mainInformation">
<h1> Certificate Not Stored Correctly / Cannot Be Stored </h1>
<div class="header">
<p class="subInfo"> Below are the resolution options. Click to open/close more information. Click on images to enlarge. </p>
<p class="subInfo"> Note: Not all issues have more information. The information is subject to change. </p>
</div>
<div class="bodyInfo">
<button type="button" class="collapsible"> Device Date was not Correctly Set <div class="icon"></div></button>
<div class="content">
<div class="column">
<p> Verify <b>serial number</b> on device, and on Service and Manufacturing Software. </p>
<p> <b>If serial number on the device does not match with the S&M software:</b> Then the device date was not set correctly. </p>
</div>
<div class="column">
<a href="../images/certificateSM.png" data-lightbox="image-1" data-title="Check the S/N on the S&M software as shown."> <img src="../images/certificateSM.png" alt="Image of S/N on S&M"> </a>
<a href="../images/certificateT2.png" data-lightbox="image-1" data-title="Check the S/N on the T2 device screen as shown."> <img src="../images/certificateT2.png" alt="Image of S/N on S&M"> </a>
</div>
</div>
<button type="button" class="collapsible" disabled> Faulty HMI / Mainboard </button>
</div>
<div class="footer">
<p> Created by Jason Tung. Should any issues arise, please let them know. </p>
<p> © Nanosonics 2023. All rights reserved. </p>
</div>
</div>