Question

这是我的问题：我有head.php页面，我在我的网站的每个页面上都包含这个页面，并在每个页面的末尾包含一个footer.php页面。

基本布局在head.php文件中： http://prntscr.com/5jbn1b

正如你所看到的，我的页脚位于头部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>

Answer 1

您的基本代码是position：absolute。这基本上意味着它之后的任何东西都会弹出它，除非它被指向另一个位置。绝对通常会忽略所有其他div并将其自身放置在任何地方。

有几种方法可以改变这种行为，但最简单的基于你在这里显示的内容是将#base更改为不是位置：绝对。

将页脚放在头下

1 个答案: