Position footer ALWAYS stuck to the bottom of the page

Navigation
7

Good afternoon people! I searched for half an hour and did not find anything that would help me or give me positive results. I have a dynamic table that changes the number of rows to display according to what one selects from the DropDownList. The problem is that for those cases where the table has few rows, the footer gets out of place and as you can see below is not "stuck" well at the bottom of the page.

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

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

Thank you very much!

    
asked by Lucas. D 23.05.2016 в 20:34
source

5 answers

14

You could "push" the footer down so that when the board is very large it does not cover it however when it is very small the footer remains at the end.

I'll give 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 adjusts to the top 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>
    
answered by 23.05.2016 / 20:50
source
6

You should set the position as fixed and the left and bottom to 0 to be set lower left on 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>
    
answered by 23.05.2016 в 20:37
2

You can use Bootstrap, including the library in the head and adding the class .navbar-fixed-bottom to the footer in the following way: 

class="navbar navbar-fixed-bottom"

Finally, in the style of the body you put: 

body { padding-bottom: 70px; }

and it would look great.

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

    
answered by 12.06.2017 в 16:50
0

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

Having the file footer.php 

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

With the properties estilo.css 

/* 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 you have served, greetings ..

    
answered by 16.05.2017 в 02:41
0

I do not know if it's useful, but find a good solution, you have to use the relative position ... 

footer #pie_pagina {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: black;
}
    
answered by 12.10.2018 в 01:59
Equivalence of "+=" of javascript in php? Differences between x ++ and ++ x in JavaScript [duplicated]