Menu
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>
554
However, if the page has a short amount of content on it, a statically positioned footer may not render at the bottom of the user's browser window. A sticky footer will guarantee that it is always placed at the bottom of the browser window AND after all the content, regardless of the length of content on the page.
Wrap the entire content before the footer in a div. You can adjust min-height as you like based on how much of the footer you want to show in the bottom of the browser window. If set it to 90%, 10% of the footer will show before scrolling.
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>
Since Bulma still doesn't support a "sticky" footer, this is the easiest way to do it:
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > footer {
margin-top: auto;
}
It works in Chrome, Safari, Firefox, Edge, and Internet Explorer 11.
26
You can set a fixed height to your footer and then calculate the height of your container accordingly with calc():
.main-content {
height: calc(100vh - 80px);
}
.hero-foot {
height: 80px;
}
Demo
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
