CODEWITHSUNDEEP
cssangularjs
systemdebt
systemdebt

Reputation: 4941

sticky footer at bottom in angular

I am trying to place a footer at the bottom .

enter image description here

and it is for some reason coming out like this.

In index.html, I have:

<main flex layout="column">
      <div>
        <div ui-view="" ></div>
      </div>
    </main>

    <footer>
      <md-toolbar class="md-hue-2 md-scroll-shrink">
        <div layout="row" layout-align="center center" flex>
          Powered by Webocity Technologies
        </div>
      </md-toolbar>

Sticky or not, this looks wrong. What seems wrong here and how to fix this?

Upvotes: 7

Views: 30119

Answers (3)

Julian
Julian

Reputation: 393

you can try with this css class in the footer.component.scss:

.footer {
    bottom: 0;
    padding: 19px 15px 20px;
    position: absolute;
    right: 0;
    color:  #98a6ad;
    left: 210px;
    background-color: #ffffff;
    box-shadow: 0 0 1px rgba(50,58,70,.1);

    .footer-links {
        a {
            color:  #98a6ad;
            margin-left: 1.5rem;
            transition: all .4s;
            &:hover {
                color: #323a46;;
            }
            &:first-of-type {
                margin-left: 0;
            }
        }
    }
}

I think the important ones are bottom:0; and position: absolute;, you can play around with them

And do not forget to put <footer class="footer"> in your HTML

BR,

Julian

Upvotes: 0

Teknotica
Teknotica

Reputation: 1136

There's loads of techniques to achieve this. One of my favourites is the one that doesn't need any fixed or absolute positioning (although totally valid) but setting the content to 100%. This will only work with a fixed footer height though.

<main flex layout="column">
  <div>
    <div ui-view="" ></div>
  </div>     
  <footer>
    <md-toolbar class="md-hue-2 md-scroll-shrink">
      <div layout="row" layout-align="center center" flex>
        Powered by Webocity Technologies
      </div>
    </md-toolbar>
  </footer>
</main>

And your CSS:

html, body {
  height: 100%;
  margin: 0;
}
[main] {
  min-height: 100%;
}
[footer] {
  height: 150px; // for this example, can be anything
  margin-top: -150px; // exact same value as the height
}

Upvotes: 1

Kalaiselvan
Kalaiselvan

Reputation: 2134

Use position:fixed;bottom:0px; to display your footer at bottom

footer{
position:fixed;
bottom:0px;
background-color:pink;
width:100%;
}
<main flex layout="column">
      <div>
        <div ui-view="" ></div>
      </div>
</main>

<footer>
  <md-toolbar class="md-hue-2 md-scroll-shrink">
    <div layout="row" layout-align="center center" flex>
      Powered by Webocity Technologies
    </div>
  </md-toolbar>
</footer>

Upvotes: 19

Related Questions