[Resolved] Footer to be at the bottom (not position:fixed)

Home Forums Support Footer to be at the bottom (not position:fixed)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #968458
    Daniel

    Hi GeneratePress community!

    Was wondering if there is any way to achieve the “footer always displayed at the bottom” with GP?

    The codes that should work are:

    HTML

    
    <html>
      <body>
        <div class="site">
          <header></header>
          <div class="site-content"></div>
          <footer></footer>
        </div>
      </body>
    </html>
    

    CSS using flexbox

    
    .site {
      height: 100vh;
      display: flex !important;
      flex-direction: column;
      justify-content: flex-start; /* align items in Main Axis */
      align-items: stretch; /* align items in Cross Axis */
      align-content: stretch; /* Extra space in Cross Axis */
    }
    
    .site-content {
      flex: 1; /* required for the content area to fill, pushing footer to always be at the bottom */
    }
    

    As GP uses:

    HTML

    
    <html>
      <body>
        <header></header>
          <div class="site">
            <div class="site-content"></div>
          </div>
        <footer></footer>
      </body>
    </html>
    

    CSS using flexbox

    
    body {
      height: 100vh;
      display: flex !important;
      flex-direction: column;
      justify-content: flex-start; /* align items in Main Axis */
      align-items: stretch; /* align items in Cross Axis */
      align-content: stretch; /* Extra space in Cross Axis */
    }
    
    .site {
      flex: 1; /* required for the content area to fill, pushing footer to always be at the bottom */
    }
    

    Changing .site to the body, and .site-content to .site kind of “broke” the site.

    Is there any known way to force the footer to show up on the bottom? Use case: 404 pages or pages with incredibly short content that couldn’t fill the content area of the page.

    Thank you so much fam!

    #968745
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try this CSS?

    @media (min-width: 1024px) {
        #page {
            min-height: calc(100vh - 397.5px);
        }
    }

    and replace 397.5px with the height of the header/navigation.

    Let me know 🙂

    #968851
    Daniel

    Hi Leo!

    How are the values added? As it’s not exactly <header> + <nav> (eg: my header was 66.7px, nav was 70px; ended up needing 300+ px).

    Different media queries required different heights.

    Any flexbox or CSS grid method instead?

    #968974
    Leo
    Staff
    Customer Support

    Should only need one media query.

    Think we would have to target specific pages if you use flexbox.

    Any chance you can link me to the page in question?

    #972357
    Daniel

    Sure. It’s

    https://rent.asiamannequin.com

    Can’t provide access right now as it’s a live site; so gotta test with the Chrome Dev Tools.

    #972365
    David
    Staff
    Customer Support

    Hi there,

    you can try something like this:

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .container.grid-container {
        width: 100%;
    }
    .site-footer {
        margin-top: auto;
    }
    #972376
    Daniel

    Hi David, this worked perfect! Thank you so much for both replies. Awesome!! 🙂

    #972385
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.