Semantic-ui: [Examples] Add Sticky Footer Example

[jonywtf]

Hi! How can i make sticky footer like
http://getbootstrap.com/examples/sticky-footer/

"ui bound bottom sticky" is bad...

I can't find good example like bootstrap sticky footer
Thanks!

[jlukic]

This is the best way to do a sticky footer.
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

It is not included in the library, but I'll add an example to the layouts section.

[ttasovac]

is there a fully working semantic-ui example for this somewhere?

[Dreyer]

@ttasovac I've been testing the flexbox layout mode as suggested above. Seems to come down to where you apply it. I've managed to get it working on one of the example layouts by doing the following:

.pusher {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.pusher > .footer {
  flex: 1;
}

I've modified the standard 'Homepage' layout to shorten the content on the page:
https://jsbin.com/doyubanoge/edit?html,css,js,output

This is probably not in keeping with the 'Semantic UI' conventions but at least demonstrates a workaround for the current v2.1.x framework.

[ttasovac]

thanks a lot @Dreyer! looks great.

[jlukic]

@Dreyer It's perfectly fine to use any arbitrary flex containers around SUI elements.

[cyberwombat]

@Dreyer - that JSBin example is not working for me. The footer just stretches upward if I make my screen high enough.

[piya23300]

I have a problem the same @cyberwombat

[Dreyer]

@cyberwombat + @piya23300 - I had another quick look at the JSBin example. It's still working for me in Chrome and Firefox. Which browser and version are you using?

[cyberwombat]

@Dreyer - chrome and safari latest. Do this: Remove jsbin's top gray thingy, make your browser full screen and remove the h3 and P content. You should see the footer become taller.

[Dreyer]

@cyberwombat I think I see what you mean. For my purposes it wasn't really a problem but I've had a go at fixing it. How does this work for you? I had to move the footer outside of the .pusher and add #content so that only the main content area flexes.
https://output.jsbin.com/culavuxugi

Edit:
https://jsbin.com/culavuxugi/edit?html,css,js,output

[cyberwombat]

@Dreyer works for me!

[piya23300]

@Dreyer Thank you. it works for me.

[catimos]

@Dreyer Yes it works Thankyou!

[beauraF]

Hi ppl,

I implemented the last example of @Dreyer but I get this result :

Has anyone ever encountered the problem ?

[yshterev]

@Dreyer Not bad but broken on IE 11

[jonaschn]

I followed the way @jlukic suggested.
@Dreyer Do you know why it is not working without a segment around the container
(around the grid)?
You can find an example here.

[mikecann]

If you are using React with Semantic UI, you can do something like this:

<div style={{ display:"flex", minHeight:"100vh", flexDirection:"column" }}>
  <PageHeaderMenu />
  <div style={{ flex:1 }}>
    <PageContent />
  </div>
  <PageFooter />
</div>

Im thinking it should be pretty easy to turn this into a React component for those wishing to.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[dionkas]

@mikecann's suggestion is great! Make sure if you use the Menu component to not add the "fixed" prop