CODEWITHSUNDEEP
htmlcssangularjsionic-framework
sushibrain
sushibrain

Reputation: 2780

Sticky footer when page is not filled with content

So I guess that there already are a ton of topics on this, and I apologize if this is a duplication of one. I just couldn't find it then.

I'm busy with an angular application, based on the Ionic framework for testing. Now what I'd like to accomplish is a footer that will always stick to the bottom of the page. And for some reason, it does not.

This is what happens (orange bar should act as footer.): enter image description here

And what I've tried to implement is a solution very similar to Ryanfait's stickyfooter.

My CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -150px; 
}
.page-wrap:after {
  content: "";
  display: block;
  height: 150px;
}

#mainView #footer {
    height: 150px;
    background: orange;
}

And then my HTML:

<div class="page-wrap">
        <div id="logo-ionic">
            <img src="img/ionic.png" />
        </div>
    </div>

    <div id="footer">
        <!-- Footer content blablabla -->
    </div>

I do admit that I'd rather not use a javascript solution for this.

Thanks (:

Upvotes: 0

Views: 155

Answers (2)

Shohel
Shohel

Reputation: 3934

Most CSS solutions to this problem aim to meet a few goals:

They should have a fluid center with fixed-width sidebars. The center column (main content) should appear first in the HTML source. All columns should be the same height, regardless of which column is actually the tallest. They should require minimal markup. The footer should “stick” to the bottom of the page when content is sparse.

see https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Second: Solution list

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
http://www.cssplay.co.uk/layouts/fixit.html
http://jsfiddle.net/jgmoy4a3/
http://codepen.io/VinSpee/pen/zxBJVO

Upvotes: 0

Moid
Moid

Reputation: 1447

Considering your Ionic need why dont you use there <ion-footer-bar></ion-footer-bar> directive.

Here have a look at this..

Upvotes: 1

Related Questions