Footer getting stuck on middle of the page

Question

I'm working on an angularjs + node js application. I'm calling my views in my index.html as follows:

<div ng-include="'views/header/header.view.html'"></div>
<div ng-view style="height: 100%"></div>
<div ng-include="'views/footer/footer.view.html'"></div>

I added style="height: 100%" because without adding it my ng-view wasn't extending to the full screen. But now my footer intersects my page. It's probably because renders right after height: 100% i.e. the edge of the window.

How can I fix this?

score 6 · Accepted Answer · answered Apr 21 '16 at 09:48

6

Use position for footer:

<div ng-include="'views/footer/footer.view.html'"
     style="position: fixed; bottom: 0; left: 0; right: 0;"></div>

Also make sure you give a bottom padding to body for the height of footer, so that the contents do not get overlapped behind the footer.

answered Apr 21 '16 at 09:48

Praveen Kumar Purushothaman

164,888
24
203
252

This seems to have solve everything except for the fact that it's always visible at the bottom of the screen, now. Is there some way to make it only come up at the end of the screen – anonn023432 Apr 21 '16 at 15:43
@Huskyworld Sure... That's what is called as Sticky Footer. Kindly have a look at [Modern Clean CSS “Sticky Footer”](http://mystrd.at/modern-clean-css-sticky-footer/) and [CSS Tricks Snippets - Sticky Footer](https://css-tricks.com/snippets/css/sticky-footer/) on how to implement it in your page. – Praveen Kumar Purushothaman Apr 21 '16 at 17:31

score 3 · Answer 2 · edited May 04 '16 at 15:27

From https://teamtreehouse.com/community/when-is-inline-css-a-good-idea:

It's considered good practice to keep your css and your html separate. By adding in-line styles, it makes it more difficult to revise the look of a site, it makes it more difficult for future programmers to modify your site, and is overall NOT the best way to go. If everything is in a CSS file, then you can change the entire design of your site without having to mess with the data (HTML) of the site. So my advice do NOT use inline styles.

<div class='sticky-footer' ng-include="'views/footer/footer.view.html'"></div>

In your css file, just add this class

    .sticky-footer {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        right: 0;
        height: whatever you want px;
     }

score 0 · Answer 3 · answered Apr 21 '16 at 09:49

<div ng-include='"templates/header.html"'></div>
    <div ng-view></div>
    <div ng-include='"templates/footer.html"' class="footer--section"></div>

.footer--section {
    margin: 0 ;
    width: 100%;
}
.footer address {
    float: right;
    font-size: 13px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    line-height: 18px;
    margin: 0;
    padding: 0;
}

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-offset-6">
                <address>
                    your addresss... or footer
                </address>
            </div>
        </div>
    </div>
</div>

I hope it helps :)

Footer getting stuck on middle of the page

3 Answers3