search

mmistakes / minimal-mistakes

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.
https://mmistakes.github.io/minimal-mistakes/
MIT License
12.24k stars 25.35k forks source link

Footer not visible in two column view #1587

Closed kcha closed 6 years ago

kcha commented 6 years ago

Environment informations

I'm just starting to get familiar with this theme on my local machine. I noticed that in the two-column layout with the sidebar, even if there minimal content in the main section such that scrolling is not required, you still need to scroll down to reveal the footer. An example of this can be seen when you load main page of the example website (see screenshots below). The problem seems to fix itself when you change to the single-column layouts. Is it possible to keep the footer visible in all views? Thanks!

screen shot 2018-03-16 at 10 29 46 pm

Scrolling down reveals the footer:

screen shot 2018-03-16 at 10 29 39 pm
mmistakes commented 6 years ago

Not sure this is a bug. There is some JavaScript that calculates the screen height to push the footer to the absolute bottom.

Before this, pages with little to no content that didn't fill the viewport, would cause the footer to float in the middle of the page because the content wasn't tall enough to push it down.

Try adding some posts and content and see if things improve for you.

kcha commented 6 years ago

I tried adding some content in two scenarios, one with enough content to overfill the viewport and one without. In the first case, it behaves as expected -- the footer immediately follows the end of the content as you scroll down. In the second case, it's still the same as what I showed above. I found one example online of a page that has minimal content, but the footer is visible in all views: https://zenglix.github.io/links/, which to me is the behaviour I was expecting. It looks like the page is using an older version of the theme and I haven't checked what may have changed. Although if you think the current behaviour is to be expected, then I will drop this issue. Thanks!

mmistakes commented 6 years ago

I did some testing with a page that had no content and everything looks as expect.

There's some extra whitespace in the main content area, but that's due to some sidebar CSS that stretches it fill the height of the viewport. This is needed to make it "stick" on pages that have some extra content.

What you can do is use your browser's web developer tools and inspect elements. It'll give you a better idea of what's going on... like the following screenshot (you can see how the sidebar stretches even though it isn't really that tall with content).

screen shot 2018-03-17 at 9 12 52 am

Closing as I everything appears to be working as intended. If you think otherwise, have a public repo that replicates the problem, and indicate what browser it's doing it in I can dig in further. Feel free to reopen the issue is that's the case.

mmistakes commented 6 years ago

Also if this is an issue for you... you can remove the sticky class from the sidebar. It will remove the CSS that gives it a height to fill the viewport.