Home / Questions / 10757
Accepted
Lucas. D
Asked: 2020-05-24 10:34:19 +0800 CST 2020-05-24 10:34:19 +0800 CST

Position footer ALWAYS glued to the footer

  • 772

Good afternoon people!. I have searched for half an hour and I have not found anything that works for me or gives me positive results. I have a pivot table that changes the number of rows to display based on what one selects from the DropDownList. The problem is that for those cases in which the table has few rows, the footer gets out of place and, as you can see below, it is not "stuck" properly to the footer.

enter image description here

I have tried with the position attribute, with others of which I had never heard but I can't get the footer to always stick to the footer. At the moment this is what I have in my css;

footer
{
    margin-top:50px;
    width:100%;
    height:200px;
    background-color:red;
}

From already thank you very much!

html

9 Answers

  1. Best Answer

    You could "push" the footer down in such a way that when the table is very large it doesn't cover it however when it is very small the footer stays at the bottom.

    I leave you an example

    Note: Run the snippet full screen so you can see the result better.

    html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
    <table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

    If the table is very large, the footer is adjusted to the height of the page instead of covering it.

    html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
    <table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

    • 36

  2. You should set the position to fixed and the left and bottom to 0 so that it is fixed at the bottom left of the page:

    #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
    <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="footer">Pie de página</div>

    • 10

  3. You can use Bootstrap, including the library in the head and adding the class .navbar-fixed-bottomto the footer as follows:

    class="navbar navbar-fixed-bottom"

    Finally, in the style of the body you put:

    body { padding-bottom: 70px; }

    and it would be very nice.

    PS: The bootstrap library is not only useful for this, it has many advantages in terms of aesthetics.

    • 5

  4. I've run into this same problem and haven't been able to fix it other than using Flexbox.

    The topic is relatively simple (once you've wrestled with half of the answers already given). Let's imagine that we have a structure composed of HEADER, BODY and FOOT.

    <body>
 <div class="cabecera"></div> <!-- header -->
 <div class="cuerpo"></div> <!-- main -->
 <div class="pie"></div> <!-- footer -->
</body>

    To this we are going to assign the property "display: flex" of Flexbox in this way:

    body { // El body (o cualquier otro <div>) hace de "contenedor padre"
  display: flex;
  flex-direction: column;
}

    Let's assume, for example, that HEADER and FOOTER have an assigned size of:

    .cabecera, .pie {
  height: 10em;
  background-color: grey;
}

    Now to BODY we can add a unique feature that will do the magic:

    .cuerpo {
  flex-grow: 1; // En este caso CUERPO se comporta como "elemento hijo"
  background-colour: #333333;
}

    In this way we are giving the remaining height to the content in BODY, and it will push PIE towards the bottom of the screen, whatever height it is.

    • 3

  5. Good.. A practical way to include it would be..

    Having the footer.php file

    ?php
    echo "<footer> Copyright &copy; "  . date("Y") ." -   tudireccion.com </footer>";
?>

    With the style.css properties

    /* Pie de pagina*/
footer {
        text-align: center;
        font-family: sans-serif;
        color: whitesmoke;
        width: 100%;
        bottom: 0;
        position:fixed;
    }

    And invoking it from any page with..

    <?php include 'footer.php'; ?>

    I hope it has served, greetings..

    • 2

  6. I don't know if it works, but I found a good solution, you have to use the relative position...

    footer #pie_pagina {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: black;
}
    • 2

  7. If you want here is a link to github

    I solved it in the following way:

    <body>
    <div>
        <!-- Navigation -->
        <nav class="nav">
            <img src="icono.png" alt="" class="nav__logo"></a>
            <span class="nav__title">Navigation</span>
            <ul class="nav__ul">
                <li class="nav__li"><a href="#">Inicio</a></li>
                <li class="nav__li"><a href="#">Pepes</a></li>
                <li class="nav__li"><a href="#">Jaimes</a></li>
            </ul>
        </nav>
    </div>
    <div>
        <section class="content">
        </section>
    </div>
    <div>
        <!-- Footer -->
        <footer class="footer">
            <p class="footer__p">
                &copy; Copyright 2020 &copy; <a href="#">Pingui Studio</a>
            </p>
        </footer>
    </div>
</body>

    I made a new container that would be what would go inside, in your case it would be the table, once you have that I gave the style to navand to footer, that it should navoccupy width and 3.5 emheight 100vwand that it be glued above putting 0de margin, and footerI put position relative bottom 0, but what this does is that it positions it according to the flow of the page, so if nothing is written in the content the footer is uploaded, that is what happens in your case, then you would have to do the following: put a class on it to the content that is going to be here .contentand give it a min-heightfrom 77.6vhor whatever fits your page

    /* Content */
.content {
    background-color: #ffffff;
    margin: 1em;
    min-height: 77.6vh;
    padding: 1em;
}

    and there it is, and if you put more elements inside the content, the footer will go down and if there is no content, the box would remain in 77.6vh because it has the min-hight property.

    • 1

  8. With position fixed it will always be visible at the bottom if that is what you want:

    footer{
    position: fixed;
    bottom: 0;
}
    • 0

  9. A very simple way to do that is by placing a size footerin percentage, for example like this:

    footer {
   padding: 10%;
}
    • -1