Bulma: Footer behavior

[noraj]

This is a question or a bug about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.7.2
My browser is: Firefox 65.0
I am sure this issue is not a duplicate, at least I made an extensive search.

Description

One always want the footer to be the last displayed element of a page. But when the previous container/section is too short, there is still some blank after the footer.

Steps to Reproduce

1. Create a page ending with a footer.
2. Put few content on the page.
3. Be sure the footer is the last element of the body.

Expected behavior

Add spacing to fill the page like for full height hero so there will be nothing after the footer.

See Actual behavior: the expected behavior is case B even when we match condition of Case A.

Actual behavior

Case A:

When the page is filled enough, there is not space behind the footer.

Another example: this page.

Case B:

When the page is not filled enough, there is space behind the footer.

Another example: this page.

[yxngl]

See #1365

[noraj]

@yxngl Yeah I saw it but I didn't understand it was the same problem, I thought by sticky footer he meant fixed footer, like a footer that is always visible like fixed menu.

So do I need to put a minimum height on the body ? Just putting a fixed on the footer will solve this and be proper ?

Anyway is it possible to put a note on the footer documentation page ?

[yxngl]

The top answer in the stackoverflow link in that issue is the traditional solution. Set the html and body to be height 100%, then footer is placed with absolute position and bottom 0.

Or use Flexbox as suggested, see example at https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3

[noraj]

@yxngl Thanks a lot, the solution using flexbox is awesome! Maybe a note about that can be added footer documentation?

[stale[bot]]

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

[noraj]

Can someone add the flexbox solution in a information message on the documentation?

[stale[bot]]

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

[noraj]

No @stale

[xdivby0]

I have a solution in mind that uses flexbox. My solution works like this:

Without:

With:

This is the implementation (I know the name of the class is not good yet):

.has-footer-child-that-should-be-pushed-down{
  height:100vh;
  display:flex;
  flex-direction: column;
}

.has-footer-child-that-should-be-pushed-down>section:nth-last-child(2){
  flex-grow:1;
}

According to CONTRIBUTING.md I should raise an issue but not a duplicate one so... I guess this issue is already describing exactly the problem so I will start working on putting this into bulma and create a pull request

[stale[bot]]

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