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

Question

所以我正在学习 HTML、CSS、PHP，我正在使用 php include 添加页眉和页脚我可以将页脚设置为每个页面的特定高度或通过创建单独的样式表单独设置它。

有没有办法使用 php include 使页脚出现在每个页面的内容下方？当每页的内容长度不同时？

这是我的页脚代码

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

Answer 1

我想你想要 position: relative。这允许您的页脚位于页面上所有内容之后。

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

Answer 2

如果您的页脚写在您的 HTML 底部，您的页脚应该出现在页面底部。应该不需要任何特殊技巧来将其保留在那里。我已经从您的 CSS 以及 position:absolute 声明中删除了 float:left 声明。这些都不需要。

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

只要您不使用 CSS

移动元素，您的元素在页面上的显示顺序将始终与在 HTML 中的顺序相同

Answer 3

我已经能够解决我遇到的问题

这是一个 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;
 }

感谢您的意见，很有帮助

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

How do I keep the footer position below content on multiple pages

html

css

php

footer

include