Question

所以我正在学习HTML，CSS，PHP，而我正在使用php include来添加标题＆amp;页脚我可以为每个页面将页脚设置为一定高度，也可以通过创建单独的样式表来设置页脚。

有没有办法让页脚显示在使用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

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

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

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

Answer 2

我想你想要position: relative。这样就可以在页面上的所有内容之后定位页脚。

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

Answer 3

如果页脚底部写入HTML，则页脚应显示在页面底部。不应该有任何特殊的技巧来保持它。我已从CSS中删除float:left声明以及position:absolute声明。不需要其中任何一个。

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

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

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

3 个答案: