footer line and height of my view keeps changing while resizing the window

user_2696230 0
Viewed 113

I have this login page with a footer. the footer keeps chaning its height to the extent that it overlaps with the body. If someone plesae can help. I do not what is going on here. I would like to have the height fixed with no overlaps while taking into account the resizing

enter image description here

enter image description here

this is my css

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 30px; 
    margin-top: auto
}

I removed position it seems better, but the footer has become outside the body/html background

enter image description here

this is the css of html and body

html, body {
    height: 100%;
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
}
css html
1 Answers

I can only assume, but i can see what's wrong. Try this:

html, body {
    min-height: 100%; /* fixed it, because the regular height 100% will cause that white background of footer*/
}
body {
    /* we need background image only in body */
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
}
.footer {
    /* we should remove position or set it relative */
    width: 100%;
    white-space: nowrap;
    line-height: 30px; 
    margin-top: auto
}

Should work perfectly.

user_31871270
Related