Search code examples
htmlcssangularjsnode.jsng-view

Footer getting stuck on middle of the page

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?

Solution

  • 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.