How to make sticky div in css? - html

Question

I have shared 2 images which mentioned below, In the first Screenshot there is a one div which label as This is test course, As you can see the footer div (which labeled as We're closed) is not sticky, I need the footer div as like second image. My conditions is something like - If the page don't have enough content then or you can say blank space then the footer div should stick at the bottom. Something like the second image.
I have tried position: fixed; it's showing perfectly but on the other pages it's still showing at the top which I don't want.
Another way I tried padding-top: 15vh; It's solving the problem but on the other page it's making blank space (Padding) which also not a good interface.
And tried many more methods like, bottom: 0; position: absolute; etc.
Current style applied in the div:
.footer {
padding: 0px 15px 10px 15px;
margin-bottom: 0px !important;
z-index: 11;
}
The HTML:
<div class="footer">
<div class="card card-style m-0">
<div class="card mx-0" data-card-height="120" style="height: 120px;">
<div class="card-center" style="z-index: 9">
Call
Email
</div>
<div class="card-center ms-3 ps-1">
<h1 class="font-20 show-business-opened working-message-above color-white mb-n1 disabled">We're Online!</h1>
<p class="show-business-opened working-message-under color-white opacity-90 mb-0 disabled">Call us Now! Let's have a
chat!</p>
<h1 class="font-20 show-business-closed working-message-above color-white mb-n1">We're Closed!</h1>
<p class="show-business-closed working-message-under color-white opacity-90 mb-0">We'll be back very soon!
</p>
</div>
<div class="card-overlay rounded-0 show-business-opened bg-highlight-dark disabled"></div>
<div class="card-overlay rounded-0 show-business-closed bg-red-dark"></div>
</div>
<div class="content p-3 pt-0 mt-0">
<p>If you have any queries or facing techinal problem, You can simply inform us, Our team will resolved your
issue as soon as they can.</p>
</div>
</div>
How can I resolve this?

Answer 1

You can do that starting from your HTML structure. for example, if your website has a header, main container, and footer, then you can manage their height to the viewport. specifically the main container's min-height to the viewport.
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.header {
width: 100vw;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: lightcoral;
}
.main-container {
width: 100vw;
/* min height should fill the viewport then to make all element in view port,
reduce other elements height from this min height including every pixel like borders or margin etc. */
min-height: calc(100vh - 300px);
/* or you can try this way if it's suitable for you */
/* min-height: 100vh; */
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}
.footer {
width: 100vw;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background: lightseagreen;
overflow: auto;
/* padding: 0px 15px 10px 15px; */
/* margin-bottom: 0px !important; */
z-index: 11;
/* border: 1px solid red; */
}
<header class="header">header</header>
<div class="main-container">main container</div>
<div class="footer">
<div class="card card-style m-0">
<div class="card mx-0" data-card-height="120" style="height: 120px;">
<div class="card-center" style="z-index: 9">
Call
Email
</div>
<div class="card-center ms-3 ps-1">
<h1 class="font-20 show-business-opened working-message-above color-white mb-n1 disabled">We're Online!</h1>
<p class="show-business-opened working-message-under color-white opacity-90 mb-0 disabled">Call us Now! Let's have a
chat!</p>
<h1 class="font-20 show-business-closed working-message-above color-white mb-n1">We're Closed!</h1>
<p class="show-business-closed working-message-under color-white opacity-90 mb-0">We'll be back very soon!
</p>
</div>
<div class="card-overlay rounded-0 show-business-opened bg-highlight-dark disabled"></div>
<div class="card-overlay rounded-0 show-business-closed bg-red-dark"></div>
</div>
<div class="content p-3 pt-0 mt-0">
<p>If you have any queries or facing techinal problem, You can simply inform us, Our team will resolved your
issue as soon as they can.</p>
</div>
</div>