Within my application.html.erb file, my setup is pretty standard:
<html class="h-100">
!head, title, scripts, styles, stylesheets removed for this example here on stackoverflow!
<body class="d-flex flex-column h-100">
<!-- Dropdown Structure -->
<header>
<%= render 'shared/nav' %>
<div class="container">
<%= render partial: 'shared/message' %>
</div>
</header>
<main role="main" class="flex-shrink-0">
<%= yield %>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<h3>hello</h3>
</div>
</footer>
</body>
While this setup seems correct, there is an issue with the footer. Sometimes it is not visible and completely disappears when visiting a page. Strangely, on certain pages the footer is visible and appears in the developer tools as expected.
Initially, I thought an old scaffold.scss file may be causing the problem and removed it entirely, but the issue persisted. I have checked for any CSS overrides in my app.scss file but found nothing that should affect the footer's visibility.
EDIT:
Upon further investigation, it appears that the html and body elements are only 760px in height, while the main content is full width. I tried setting the height to 100%, but the issue remains. The problem seems to be related to the limited height of the pages in question.
Any thoughts on what might be causing this problem?