Hero footer not at bottom of page

footer at bottom of page but not fixed
push footer to bottom
keep footer at bottom of page when scrolling
bootstrap keep footer at bottom
react sticky footer
bootstrap footer not at bottom
bootstrap 4 footer always at bottom
bootstrap footer at bottom

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>

Thanks.

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>

Support for sticky footer · Issue #47 · jgthms/bulma · GitHub, 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: Longer content pushes the footer off the page. On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space. 100% valid CSS with no hacks

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

Sticky Footer, Five Ways, It would be nice if Bulma had built-in support for "sticky footers" as Sticky footer stays always on bottom of the web page and not on bottom of the class="hero is-medium is-primary is-bold"> <div class="hero-body"> <div  When working with dynamic content that includes a footer, a problem sometimes occurs where the content on a page is not enough to fill it. The footer, rather than staying at the bottom of the page where we would want it to stay, rises up and leaves a blank space beneath it.

I know it's an old question but 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;
}

Works in Chrome, Safari, Firefox, Edge & IE11.

Keep that damn footer at the bottom - ZERO, The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the. You can optionally give the body a padding-bottom with the height of the footer to prevent the footer from hiding content at the bottom of the body. – redelschaap May 9 '18 at 7:51 @MrMiketheripper, it works for the original requirement - footer needs to be "at the end of the page, not fixed". – luke Oct 21 '18 at 20:29

Hero, This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not  Yes. It was downvoted because if a page has more content on the page, the footer still remains at the bottom of the page, no matter of the document height. This is no correct behaviour. – Radu Oct 5 '15 at 13:53

Footer, Container · Level · Media Object · Hero · Section · Footer · Tiles. The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. The basic hero-head (​always at the top); hero-body (always vertically centered); hero-foot (always at the bottom). Logo. 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

How To Create a Bottom Navigation Menu, The Bulma footer is a simple container, with lots of bottom padding, making it great as the last element of The website content is licensed CC BY NC SA 4.0. The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. The basic requirement of this component are: hero as the main container. hero-body as a direct child, in which you can put all your content. For the fullheight hero to work, you will also need a hero-head and

How To Create a Fixed Footer, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  When you have limited content on a page, the footer may be forced up in the page. You can add CSS to force the footer to the bottom of the page. This is also known as a sticky footer. Add the following CSS code.

Comments
  • what do you mean it doesn't go to the bottom? Where exactly should it go - bottom of the content, bottom of the page, you want it "fixed", "sticky", etc? Maybe you can share an example of what you're trying to do?
  • Sorry for downvote but in the provided snippet the footer is not at the bottom of page...