Hero footer not at bottom of page

Question

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>

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? — Michael Coker, May 01 '17 at 22:00
The HTML is not well formed: There are 9 `
`s (closing div's) — Peter Mortensen, Dec 05 '20 at 08:52

score 20 · Answer 1 · answered Oct 12 '18 at 12:27

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>

score 9 · Answer 2 · edited Dec 05 '20 at 08:55

9

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.

edited Dec 05 '20 at 08:55

Peter Mortensen

30,738
21
105
131

answered Aug 09 '19 at 15:34

Steven Lantinga

91
1
1

score 1 · Answer 3 · answered May 01 '17 at 22:07

1

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

answered May 01 '17 at 22:07

Nicolas R

284
1
14

score -2 · Answer 4 · answered May 04 '17 at 02:02

Bulma Docs - Footer

Two things I noticed about your sample code:

Move your footer outside of the section tag
Bulma uses "footer" as its class name, not "hero-foot"

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" />
</head>

<body>
  <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>


  </section>

  <div class="footer">
    <p>waarom sta jij niet op de bottom van de <b><s>FUCKING PAGINA!?</s>s></b></p>
  </div>
</body>

</html>

Sorry for downvote but in the provided snippet the footer is not at the bottom of page... — Felix, Mar 26 '19 at 15:16

Hero footer not at bottom of page

4 Answers4