CODEWITHSUNDEEP
htmlcss
Dravenzo
Dravenzo

Reputation: 129

How to merge bottom border to the bottom of the page

I am trying to merge the footer border to the bottom of the page. I have no actual border just the background colour. The results I want to achieve:

enter image description here

I have tried using padding bottom, border-bottom-style but it is still not merging.

My code: 

footer {
    background-color: #dddddd;
    padding-bottom: 40px;
}
<footer>
        <p id="footername">Example Text</p>
        <p>Example Text</p>
        <p>Example Text</p>
    </footer>

enter image description here

I basically want the bottom white line to go away so that the grey background will connect to bottom page as seen in the first picture

Upvotes: 0

Views: 186

Answers (3)

Burham B. Soliman
Burham B. Soliman

Reputation: 1562

easy to go, just use position: absolute; and set bottom: 0;

footer {
    position:absolute;
    width:100%;
    background-color: #dddddd;
    bottom:0;
}
<footer>
        <p id="footername">Example Text</p>
        <p>Example Text</p>
        <p>Example Text</p>
    </footer>

Upvotes: 1

Yasin Issa Aden
Yasin Issa Aden

Reputation: 147

This is how you make your footer stick to the bottom of the page. You will have to add position:fixed. Then adjust the bottom:0 to make sure it is at the bottom

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #dddddd;
    padding-bottom: 40px;
}
<footer>
        <p id="footername">Example Text</p>
        <p>Example Text</p>
        <p>Example Text</p>
    </footer>

Upvotes: 1

jorganinho
jorganinho

Reputation: 49

Firstly, I recommend you to open Console tab in Dev Tools and check if it is a margin or padding and what causes this. If it is a body margin then you can simply do margin: 0 on body element or try doing *{margin:0; padding: 0; box-sizing: border-box}.

Upvotes: 1

Related Questions