CODEWITHSUNDEEP
htmlcss
Cobby
Cobby

Reputation: 19

Footer will not go to the very bottom of the browser page

I have inserted the footer but when I open the preview of the web page the footer is at the bottom, but once I scroll down it is stuck to one position in the page. I don't want it to be fixed or sticky, just want it to viewed once the user scrolls to the bottom of the page.

Here is the footer div tag in my html 

<div id="footer">
 FOOTER
</div>

and the css for this footer is as follows

#footer {
    height: 50px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
}

https://jsfiddle.net/5cewo3h2/

I don't know whether I have a problem with other positions on the page causing the footer to stay in one position and not move to the very bottom of the page, but any help on this would be appreciated.

Upvotes: 1

Views: 47

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371113

You need to move the footer element into the grid.

Move:

<div id="footer">
    FOOTER
</div>

to a spot in between the last two divs in the HTML:

    </div>

 <div id="footer">
    FOOTER
   </div>

</div>

    </center>

DEMO: https://jsfiddle.net/5cewo3h2/1/

Upvotes: 1

nick
nick

Reputation: 19784

Get rid of absolute positioning. Just put the div at the bottom (under your content divs) and it'll render under them.

#footer {
    height: 50px;
    left:0px;
    width:100%;
}

Upvotes: 1

Related Questions