Hero footer not at bottom of page

Asked 1/5, 2017 at 21:47 Answered 9/8, 2019 at 15:34

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>

Improvised answered 1/5, 2017 at 21:47 Comment(2)

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? – Salaidh 1/5, 2017 at 22:0

The HTML is not well formed: There are 9 <divs (opening div's) and 10 </div>s (closing div's) – Apply 5/12, 2020 at 8:52

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>

Planetesimal answered 12/10, 2018 at 12:27 Comment(0)

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.

Microbicide answered 9/8, 2019 at 15:34 Comment(0)

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

Archaeo answered 1/5, 2017 at 22:7 Comment(0)

-2

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>

Strunk answered 4/5, 2017 at 2:2 Comment(1)

Sorry for downvote but in the provided snippet the footer is not at the bottom of page... – Noose 26/3, 2019 at 15:16

Recommended topics

Hot tags