这是我的问题: 我在网站的每个页面上都包含 head.php 页面，在每个页面的末尾都包含一个 footer.php 页面。
基本布局在 head.php 文件中: http://prntscr.com/5jbn1b
这是我的问题: http://prntscr.com/5jbmnf
如您所见，我的页脚位于 head div 的后面。 这是我的代码:
style.css:
/*Base Debut*/
#base {
background-color:white;
height:auto;
width:1000px;
position:absolute;
top:0;
left: 0;
right: 0;
margin: auto;
margin-top: 80px;
}
/*Base Fin*/
/*Footer Debut*/
#foot {
bottom: 0;
padding: 5px;
margin: auto;
background-color: #303030;
width: 1000px;
color: #7A7A7A;
font-family: OswaldL;
font-size: 14px;
text-align: center;
}
#foot .under {
background-color: #2B2B2B;
width:1000px;
height:10px;
}
/*Footer Fin*/
head.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>WEBSITE</title>
</head>
<body>
<div id="header">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="connect">
<div class="links">
<a href="#">Inscription</a> <a href="#">Connexion</a>
</div>
</div>
</div>
<div id="base">
<section style="color: black;">
<nav class="gauche" style="margin-top: 55px;">
<h1>$rubrique1</h1>
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="membres.php">Membres</a></li>
<li><a href="stats.php">Statistiques</a></li>
</ul>
<?php
if(isset($_SESSION['pseudo']))
{
?>
<h1>$rubrique0</h1>
<ul>
<li><a href="messagerie.php">Messages privés</a></li>
<li><a href="options.php">Options</a></li>
<li><a href="connexion.php?inverted">Déconnexion</a></li>
</ul>
<?php
}
?>
<h1>$rubrique2</h1>
<ul>
<li><a href="news.php">$inter1</a></li>
<li><a href="album.php">$inter2</a></li>
</ul>
<h1>$rubrique3</h1>
<ul>
<li><a href="equipe.php">$lien1</a></li>
</ul>
</nav>
<nav class="droite" style="color: black; float: right;">
<h1>$droite1</h1>
<div class="droite_text">
<li><a href="forum.php?id=1">$forum1</a></li>
</div>
<h1>$droite2</h1>
<div class="droite_text">
$connectes
</div>
</nav>
</div>
footer.php:
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</section>
<div id="foot">
<?php echo NOM_SITE; ?> © | $footercredit <a href="#">$dev1</a> et <a href="#">$dev2</a> | $version <br />
<a target="_blank" href="mobile">Version mobile</a>
<div class="under">
</div>
</div>
<br />
</body>
</html>
最佳答案
您的基本代码是 position: absolute。这基本上意味着它后面的任何东西都会在它后面弹出，除非它被指示在另一个位置。 Absolute 通常会忽略所有其他 div 并将其自身放置在任何它想要的位置。
有几种方法可以更改此行为，但根据您在此处显示的内容，最简单的方法是将#base 更改为不是 position: absolute。
关于css - 将页脚放在标题下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27590817/