The hero footer stubbornly refuses to grace the bottom of the page

I've been working on a webpage design using the Bulma CSS framework.

Everything seems to be going smoothly, but I'm encountering an issue when trying to add a footer to my page - it's not staying at the bottom.

Should I create custom CSS for this or is there something wrong with the HTML code?

Here's the code snippet:

<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 description</p>
                    </div>
                </nav>

                <nav class="panel">
                    <p class="panel-heading">
                        Category #2
                    </p>
                    <div class="panel-block">
                        <p>Test description</p>
                    </div>
                </nav>

                <nav class="panel">
                    <p class="panel-heading">
                        Category #3
                    </p>
                    <div class="panel-block">
                        <p>Test description</p>
                    </div>
                </nav>
            </div>

            <div class="column">
                <nav class="panel">
                    <p class="panel-heading">
                        Latest statistics
                    </p>

                    <div class="panel-block">
                        <p>URLs will go here, in a list format.</p>
                    </div>
                </nav>
            </div>

        </div>
    </div>
    </div>

    <div class="hero-foot">
        <p>Why aren't you at the bottom of the <b><s>FILLING PAGE!?</s>s></b></p>
    </div>
</section>
htmlcssfooterbulma

Answer №1

To achieve the desired result in your style.css file, use the following code:

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
}

Next, make changes to your template as shown below:

<body class="container">
  <div class="content">
    ...
  </div>
  <footer class="footer">
    ...
  </footer>
</body>

Answer №2

To achieve a sticky footer in Bulma, you can utilize the following workaround:

html,
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > footer {
    margin-top: auto;
}

This method has been tested and proven to work effectively on Chrome, Safari, Firefox, Edge, and even Internet Explorer 11.

Answer №3

To ensure that your footer remains a fixed height, you can set the height of your container dynamically using calc():

.content-container {
  height: calc(100vh - 60px);
}

.footer {
  height: 60px;
}

Check out the demo!

Answer №4

Bulma Docs - Footer

Here are a couple of things that caught my attention in your code snippet:

  • Consider moving your footer outside of the section tag
  • Remember that 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 description</p>
            </div>
          </nav>
          <nav class="panel">
            <p class="panel-heading">
              Category #2
            </p>
            <div class="panel-block">
              <p>Test description</p>
            </div>
          </nav>
          <nav class="panel">
            <p class="panel-heading">
              Category #3
            </p>
            <div class="panel-block">
              <p>Test description</p>
            </div>
          </nav>
        </div>

        <div class="column">
          <nav class="panel">
            <p class="panel-heading">
              Latest Statistics
            </p>
            <div class="panel-block">
              <p>List of URLs will be displayed here</p>
            </div>
          </nav>
        </div>
      </div>

    </div>


  </section>

  <div class="footer">
    <p>Why are you not at the bottom of the <b><s>DARN PAGE!?</s>s></b></p>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expand picture when grid is selected

I am facing a challenge with my thumbnail grid. I want to enlarge an image slightly without disrupting the layout of the grid. I have experimented with different approaches, first focusing on displaying the enlarged image and then on maintaining the fluid ...

javascriptjqueryhtmlcss

Is there a way to conceal the loading screen until the website has completely loaded?

I've been working on my personal portfolio/website and encountered a bug that I can't seem to fix on my own. The issue is with the logo (aa) and text under it showing even after the content page has fully loaded, taking around 3 seconds to hide. ...

javascriptjqueryhtmlcss

Expanding the content of :before

I have implemented the code below to enable a hover effect when users hover over an image: &:before ' content: "example image" Background: #444; Padding: 20px Height: 300px Width: 300px Font family: 'open sans' Opacity: 0; ' &: ...

htmlcss

Tips for adjusting the orientation of photos as you reposition your iPhone in an iOS application

Does anyone have suggestions on how to incorporate this? I built my app with cordova 4.0.0 and used JavaScript, HTML, and CSS. ...

javascripthtmlioscsscordova

A guide on resolving the Bootstrap Carousel flickering effect on iPhones when transitioning between items. Check out the video demonstration for a clear illustration

I'm currently troubleshooting an issue with a website that features two carousels specifically designed for mobile screen sizes. The functionality works flawlessly on all devices except for certain models of iPhones. Unfortunately, I am unable to debu ...

htmljqueryiphonecarouselflicker

Apply CSS styling to options specifically in Internet Explorer

How can I style options in a select list using CSS? I have successfully styled the options in Mozilla Firefox, but the styles do not apply in Internet Explorer and Chrome. Here is a jsFiddle link for IE <select class="mapField"> <option valu ...

cssinternet-explorerhtml-select

What is the correct way to enable overflow-y as visible while setting overflow-x to scroll within a div

How can I implement overflow-y: visible with overflow-x: scroll in my code? The number of buttons may vary, and when there are too many, they should scroll horizontally. However, when I click the Dropdown button, I want to make sure that the dropdown list ...

javascripthtmlcssbootstrap-4

How can I alter the appearance of HTML text when hovering over the enclosing div?

I want the text to change color and zoom when the cursor is near it (when the mouse enters the area of the div containing the text). Currently, I am able to change the text color only when hovering directly over it. Below is a snippet of the code. HTML: & ...

htmlcssangulartypescript

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the ...

javascriptjquerycsshighcharts

Combining an if-statement with an HTML button within a single function in JavaScript

I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...

javascripthtmlradio-buttonundefinednan

Update the div tag container after resizing it

Using bootstrap alongside Jquery/Javascript and Leaflet maps, I am facing an issue. Inside the pBody div lies the map div, along with a sidebar div. The toggle switch above collapses the sidebar div and should expand the width of the pBody div from span9 t ...

jquerycsstwitter-bootstrapleafletmapbox

Relocating to the middle of the webpage (Automatically resize for mobile compatibility if feasible)

Apologies for my poor English. Are there any suggestions on how to center this without using margins or other methods? Perhaps there are alternative solutions. https://i.sstatic.net/dXfwL.png Also, is it feasible for the image and video to automatically a ...

javascripthtmlcssvue.js

Is the use of div:after content really affecting the width? I am having trouble getting my transition to work

Here is a simple code snippet that represents my actual code: #myDiv { background: black; color:white; float:left; min-width:45px; max-width:450px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #myDiv:hover:after { width ...

javascripthtmlcss

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Scroll automatically to the following div after a brief break

On my website, the title of each page fills the entire screen before the content appears when you scroll down. I am interested in adding a smooth automatic scroll feature that will transition to the next section after about half a second on the initial "ti ...

javascriptjqueryhtmlcss

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

What steps should I take to resolve the CSS layout issue specifically on iPhone Safari browser?

It's functional on Chrome desktop However, it has issues on Safari iOS Here is the CSS code snippet .button { border: 1px outset $color3; background: $color1; color: $color4; font-size: 80%; // Reduced size due to uppercase text ...

htmlioscssiphonesafari

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

javascriptphpjqueryhtmlajax

Obtaining CSS styles in the code-behind of an ASP.NET application

Is it possible to retrieve CSS styles from a styles.css file in ASP.NET C# code behind, or is a workaround necessary? I haven't been able to find a solution online. While utilizing themes in my web application, I also require server-side processing a ...

c#asp.netcss