How to make sticky div in css?

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">
            <a href="tel:+1234567890" class="external-link show-business-opened float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black disabled">Call</a>
            <a href="mailto:[email protected]" class="show-business-closed float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black">Email</a>
        </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">
            <a href="tel:+1234567890" class="external-link show-business-opened float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black disabled">Call</a>
            <a href="mailto:[email protected]" class="show-business-closed float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black">Email</a>
        </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>