Fixed Footer overlapping with the vertical scrollbar

Question

The code for the footer is as follows:

<div class="wrapper">
    <footer class="help1">
        <div class="row help1">
            <div class="container">
                <div class="col span-1-of-2">
                    <div class="container">
                        <i class="fas fa-phone fa-3x phone-img"></i>
                        <p>Contact Details: +00 0000 0000 | +22 1212 2323</p>
                    </div>
                </div>

                <div class="col span-1-of-2 help">
                    <div class="container">
                        <p class="email"> <strong>Email-address</strong> :bme@gmail.com</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

The css code is as follows:

 .help1
    {
        background-color: black;
        color:white;
        position: absolute;
        bottom: 0;
        width: 100%;  
      /* Footer height */
    }
    .wrapper
    {
   height:15%;
    }

The footer overlaps with the vertical scroll bar. Any help would be appreciated

Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Cully, Apr 04 '20 at 06:57
@Cully The footer stays at the bottom of the page. The main problem here is that it overlaps with the vertical scrollbar — Chaitra, Apr 04 '20 at 07:06
@Chaitra There are a lot of solutions to your problem in that question. Maybe try one of them, see if it solves your scrollbar issue as well. Also, did you notice you have two `.help1` elements? Try targeting `footer` in your CSS instead. — Cully, Apr 04 '20 at 07:25

score 0 · Accepted Answer · answered Apr 04 '20 at 07:29

Are you looking for a solution like this. This is a flex box implementation example.

body {
    margin: 0;
}

.help1 {
    background-color: black;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: auto;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

<div class="wrapper">
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <h1>Sample Line</h1>
    <footer class="help1">
        <div class="row help1">
            <div class="container">
                <div class="col span-1-of-2">
                    <div class="container">
                        <i class="fas fa-phone fa-3x phone-img"></i>
                        <p>Contact Details: +00 0000 0000 | +22 1212 2323</p>
                    </div>
                </div>

                <div class="col span-1-of-2 help">
                    <div class="container">
                        <p class="email"> <strong>Email-address</strong> :bme@gmail.com</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

Fixed Footer overlapping with the vertical scrollbar

1 Answers1