Hero footer not at bottom of page
I am styling a webpage using the Bulma CSS framework.
Well, it works pretty good, but when I try to add a footer on my page it doesn't go to the bottom.
Do I need to make my own CSS for it or is this a problem in the HTML code itself?
Code:
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<nav class="panel">
<p class="panel-heading">
Category #1
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #2
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #3
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
</div>
<div class="column">
<nav class="panel">
<p class="panel-heading">
Laatste statistieken
</p>
<div class="panel-block">
<p>Hier komen de URL's te staan, in een lijst</p>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<p>waarom sta jij niet op de bottom van de <b><s>FUCKING PAGINA!?</s>s></b></p>
</div>
</section>
Answer
This will do the trick (your style.css):
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.section {
flex: 1;
}
And then adjust your template like this:
<body class="main">
<div class="section">
...
</div>
<footer class="footer">
...
</footer>
</body>