如何将底部边框合并到页面底部

Question

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:

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>

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

Answer 1

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} *{margin:0; padding: 0; box-sizing: border-box} *{margin:0; padding: 0; box-sizing: border-box} .

Answer 2

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>

Answer 3

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>