Question

所以我设法弄明白了如何在页面底部设置页脚。

但是，当我必须向下滚动页面或者缩放和取消缩放时，我遇到了问题。页脚实际上并不停留在底部，它似乎只是坐在一个固定的位置，达到了网页的大小。

这是我对主网页的html / php编码：

<html>
   <head>

<title> First Html! </title>

<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">


<?php include("header.php"); ?>




</head>
<body>
<?php include ("navigation.php"); ?>




<p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>


<br>
<br>
<center>
<a href="http://bdpastudents.com"><img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200"></a>
</center>

</body>



</html>

<?php include ("footer.php"); ?>`

这是我的页脚编码：

<div id="footer">


<meta http-equiv="refresh" content="none">

<title> First Html! </title>

<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">



<?php


// Prints the day, date, month, year, time, AM or PM
 echo date("d/m/Y h:i A") ; 
 echo " Craed!." ;
 ?>

</div>

这是我的css：

body {

height:100%;
font-family: Helvetica, Arial, sans-serif;

padding: 0;

margin: 0;

background-color: #a2a2a2;
}

p {
    text-align:center;
    color: white;
    font-size: 150%;
  }

ul {
    color: white;
    font-size:150%;
    }

#fade {
display: none;
}




 #head {

    background-color: #65659a;
    color: white;
    text-align: center;
    padding: 5px;

}

#footer {
    height:50px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #65659a;
    text-align: center;
    color: white;
}

#nav {
    position: absolute;
    line-height:30px;
    background-color: #000000;
    height:85%;
    width:120px;
padding:5px;
}


#nav ul {
    margin: 0;
    padding: 10px;
    color: white;
    font-size:125%;
}

#nav ul li {
    list-style: none;
    padding: 10px;
    font-size: 93%;

我做错了什么？有什么东西我不见了吗？

对不起，很长的帖子，我很陌生。

谢谢！

Answer 1

我试着稍微清理一下代码，因为它太乱了。我还没检查过CSS代码，所以我真的不知道它是否有问题。只是修复了HTML。我正确添加了<head>部分，并使用<footer>

的标记修复了问题

查看此JSFiddle

问候！

PS：我还建议更多地研究HTML。您可以学到很多here.

Answer 2

好的，这是一个镜头

使用名为“parent”的ID创建一个大容器。这个div将占据你的整个屏幕
使主容器成为弹性箱
在flexbox中创建两个弹性框项目
第一个div flexbox的id为'main'，将保留您的主要内容
第二个div将有一个名为“footer_container”的ID，它将保存您页脚的所有内容

这是具有id“parent”及其子项

的flexbox的css样式

.parent {
  display: flex;
  min-height: 95vh; /* Or whatever */
  flex-direction:column;
}

.child {
  width: 100%; 
  margin: none;

  padding:0px;
  }
#footer_container{
  flex-grow:0;
  height:20%;
  margin: auto; 
  border:solid;
}
#main{
  flex-grow:1;
  height:80%;
}

我也对你的css进行了一些调整（注意你的css文件将#footer位置更改为 relative ）

以下片段

body {
height:100%;
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #a2a2a2;
}

p {
    text-align:center;
    color: white;
    font-size: 150%;
  }

ul {
    color: white;
    font-size:150%;
    }

#fade {
display: none;
}
 #head {

    background-color: #65659a;
    color: white;
    text-align: center;
    padding: 5px;
    

}

#footer {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #65659a;
    text-align: center;
    color: white;
    border:solid black;
}

#nav {
    position: absolute;
    line-height:30px;
    background-color: #000000;
    height:85%;
    width:120px;
padding:5px;
border:solid;
}


#nav ul {
    margin: 0;
    padding: 10px;
    color: white;
    font-size:125%;
}

#nav ul li {
    list-style: none;
    padding: 10px;
    font-size: 93%;
}

/*THIS IS THE END OF YOUR CSS STYLE*/

/*FLEXBOX STYLING */

.parent {
  display: flex;
  min-height: 95vh; /* Or whatever */
  flex-direction:column;
}

.child {
  width: 100%; 
  margin: none;

  padding:0px;
  }
#footer_container{
  flex-grow:0;
  height:20%;
  margin: auto; 
  border:solid;
}
#main{
  flex-grow:1;
  height:80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
  <div class='child' id='main'>1
  <?php include("header.php"); ?>
<?php include ("navigation.php"); ?>
  <p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>
  <br>
  <br>
  <center>
    <a href="http://bdpastudents.com"></a><img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200">
  </center>
</div>
  <div class='child' id='footer_container'>
  <div id="footer">
<meta http-equiv="refresh" content="none">

<?php
// Prints the day, date, month, year, time, AM or PM
 echo date("d/m/Y h:i A") ; 
 echo " Craed!." ;
 ?>
</div>
  </div>
  </div>

将页脚保持在底部

2 个答案: