Footer HTML not attached to bottom-CodePudding

It's a little bit strange. In my 2 HTML pages i have a footer that is equal to both but in one, that is shorter than the other, the footer goes up and leave a space at the bottom of like 30px. (In the longer page the footer stay attached to the bottom)

Here is the css of the footer and the body:

footer{
    background-color: #0b2239;
    position: absolute;
    width: 100%;
}

html, body{
    min-height: 100%;
}

I've tried to resolve it by adding bottom: 0; but in the longer page the footer go over the other element in the page

CodePudding user response：

You just need to add to the footer the value bottom: 0;

footer{
    background-color: #0b2239;
    position: absolute;
    width: 100%;
    bottom: 0;
}

html, body{
    min-height: 100%;
}

CodePudding user response：

It may be caused by the difference in the content length of the two pages. The shorter page has less content, which causes the footer to be positioned higher on the page. To fix this, you can set the footer position to be relative instead of absolute, and then add a bottom padding equal to the height of the footer.