Search code examples
cssangulartwitter-bootstrap-3reactive-programming

Angular 4, how to keep footer at bottom with dynamic page content

my app.component.html code is as follows

<div class='container-fluid'>
<div class='row'>
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>
<div class="row">
    <footer></footer>
</div>

my footer.component.html code is:

<div class="footer">
<div class="col-sm-10">
    &copy; {{currentYear}} - <a href="">UMD</a> IP PTY LTD
</div>
<div>{{environment}}</div>

The CSS which I used to show the footer at the bottom of the page is 

   footer {
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 75%;
    height: 50px;
}

Now the issue is angular loads the data dynamically on the page. Initially footer is at the bottom of the page but when data is added to the page and the controls added at runtime on the page exceeds the initial page height my footer remains at the initial page which ends up somewhere in between the page.

How to fix this?

In the picture below controls are added dynamically using reactive form which results in footer being show between the controls.

enter image description here

Solution

  • If fixed the issue to adjust the wrapper height using the calc method mentioned on this link .

    Changed the footer html to this

    <div class="footer">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-7">
            &copy; {{currentYear}} - <a href="http://www.xyz.com.au">xyz</a> IP PTY LTD
        </div>
        <div class="col-sm-2 text-right">{{environment}}</div>
    </div>
</div>

    and changed the css for the home page to below

    .content {
    min-height: calc(100vh - 70px);
}

.footer {
    height: 50px;
}


footer {
    background: #42A5F5;
    color: white;
    line-height: 50px;
    padding: 0 20px;
}

    and changed the home page code to this.

    <div class='content'>
    <div class="row">
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
<footer class="footer"></footer>

    This works perfectly with Visual Studio Javascriptservices template for angular. footer adjusts itself even after adding the controls dynamically