CODEWITHSUNDEEP
htmlcss
Krystian Borysewicz
Krystian Borysewicz

Reputation: 779

footer not at the very bottom of page when you resize the height of browser window

When you resize the browser window height to the point where it enables scrolling, the footer moves from bottom of the page and creates a "gap"

I do not want to use POSITION: FIXED, as it does place the footer on the bottom of the screen, not the page, and later when I add more content it will cover the content below it.

The website uploaded: http://developerbay.000webhostapp.com/

footer css: 

.footer {
    background-color: #940a0a;
    height: 55px;
    line-height: 55px;
    width: 100%;
    text-align: center;
    color: #e1dac5;
    font-size: 14px;
    position: absolute;
    bottom: 0;
}

Footer HTML:

<div class="footer">
        <a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
    </div>

Upvotes: 0

Views: 999

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

Assuming I understood you, this should fix it:

body{
    min-height: 100vh;
    position: relative;
}

Upvotes: 2

Related Questions