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

【问题标题】：How do I keep the footer position below content on multiple pages如何将页脚位置保持在多个页面的内容下方
【发布时间】：2018-10-17 15:15:25
【问题描述】：

所以我正在学习 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

【问题讨论】：

您是否正在寻找当内容短于窗口高度时被下推的粘性页脚？这个SO answer 可能会有所帮助。
如果我添加任何内容，我不需要移动用户输入只是为了移动
不确定我是否理解。如果您在每一页的内容下方添加include，您的页脚应该会出现在您的内容下方。它应该自动成为下一个，因为它是在您的内容之后加载的。你有问题的例子吗？
它在我的 html 的底部，但内容似乎通过发布图片链接运行

标签： php html css include footer

【解决方案1】：

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

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

感谢您的意见，这很有帮助

【讨论】：

虽然你拿走了我的宝贵积分，但这是一个更好的解决方案。 :) 我记得我曾想过您希望页脚始终位于内容下方，而不必像您的示例那样位于页面底部。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

只要您不使用 CSS 移动元素，您的元素将始终以与 HTML 中相同的顺序出现在您的页面上

【讨论】：

页面底部是这样的

test

test

test

test h3>

test

test

test

test h3>