如何将页脚位置保持在多个页面上的内容之下

So I am learning HTML, CSS, PHP, and I am using php include to add the header & footer I can set the footer to a certain height for each page or set it invidually by creating separate stylesheets.

Is there a way to get the footer to appear under content for every page using php include? When the content is different lengths on each page?

Here is my footer code

HTML

<footer>
  <ul>
    <a href="../../page1.php">
      <li>page1</li>
    </a>
    <a href="../../page2.php">
      <li>page2</li>
    </a>
    <a href="../../page3.php">
      <li>page3</li>
    </a>
    <a href="../../page4.php">
      <li>page4</li>
    </a>
    <a href="../../page5.php">
      <li>page5</li>
    </a>
  </ul>
</footer>

CSS

footer {
  padding: 20px;
  margin-top: 450px;
  height: 1%;
  color: #ffffff;
  background-color: #30323D;
  text-align: center;
}

footer ul {
  margin-left: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}

footer ul a {
  text-decoration: none;
  color: #fff
}

footer p {
  margin-top: 120px;
}

When using position absolute

I have been able to fix the issue I was experiencing

Here is a JSFiddle

https://jsfiddle.net/lewisjames101/4h20Lwzm/

HTML
<div id="container">
<div id="header">My Header</div>
<div id="body">Small amount of content</div>
<div id="footer">My Footer</div>
</div>



CSS

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
 #body {
 padding:10px;
 padding-bottom:60px;   /* Height of the footer */
 }
 #footer {
 position:absolute;
 bottom:0;
 width:100%;
 height:60px;   /* Height of the footer */
 background:#6cf;
 }

Thank you for your input, it was helpful

I think you want position: relative. this allows your footer to be positioned after all of the content on a page.

footer {
   position: relative;
   padding: 20px;
   color: #ffffff;
   background-color: #30323D;
   text-align: center;
}

Your footer should appear at the bottom of your page if it is written in to your HTML at the bottom. There should be no need for any special tricks to keep it there. I have removed the float:left declaration from your CSS, as well as the position:absolute declaration. No need for either of these.

https://jsfiddle.net/90cbe4km/1/

Your elements will always appear in the same order on your page as in your HTML as long as you don't move them around with CSS