Bonjour,
Je rencontre un petit problème avec mon code. J'essaye désespérement de fixer mon pied de page en bas de la page mais, même après avoir fait le tour de dixaines de sites, cela ne marche pas...
Ce problème m'exaspère et en essayant, mon code ne ressemble plus à rien.
Ce que je fais
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="shortcut icon" type="image/png" href="ressources/images/logo-small-final.png"/>
<title>Accueil | StoryShare</title>
</head>
<body>
<div id="bloc_page">
<?php include('includes/header.php'); ?>
<div id="page">
<h1>Bienvenue sur <span id="story">Story</span><span id="share">Share</span> !</h1>
<h2>Le meilleur endroit pour partager ses histoires !</h2>
<p>
Ici, vous pouvez lire les histoires que les membres ont écrits ! Mais ce n'est pas tout ! <br/>
Vous pouvez également écrire des histoires en vous inscrivant sur le site !
</p>
</div>
<div id="last_story">
<h1 id="last_story_title">Dernière histoire :</h1>
<?php
try {
$bdd = new PDO('mysql:host=localhost;dbname=storyshare;charset=utf8', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
} catch (Exception $e) {
die('Erreur :' . $e->getMessage());
}
$reponse = $bdd->query('SELECT auteur, titre, histoire, DATE_FORMAT(date_publication, \'%d/%m/%Y à %Hh%imin%ss\') AS date_publication FROM histoires ORDER BY ID DESC LIMIT 0, 1');
if ($reponse != FALSE) {
while ($donnees = $reponse->fetch())
{ ?>
<h2>Écrite par <?php echo strip_tags($donnees['auteur']); ?> le <?php echo strip_tags($donnees['date_publication']); ?></h2>
<h3>Histoire :</h3>
<p id="histoire">
<?php echo strip_tags($donnees['histoire']); ?>
</p>
<?php
}
} else {
?>
<h2 id="nothing">Oh... Il n'y a rien pour l'instant...</h2>
<?php
}
$reponse->closeCursor(); ?>
</p>
</div>
<?php include('includes/footer.php'); ?>
</div>
</body>
</html>
style.css
/* Éléments principaux */
html
{
height: 100%;
position: relative;
min-height: 100%;
}
body
{
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100%;
font-family: 'abeezeeregular', Arial, sans-serif;
color: #ffffff;
background-color: #2F2F2F; /* Jet */
margin: 0;
padding: 0;
margin-bottom: 60px;
}
#page
{
background-color: #212121; /* Eerie Balck */
border-radius: 10px;
word-wrap: break-word;
}
#bloc_page
{
width: auto;
margin: auto;
min-height: 100%;
position: relative;
margin-bottom: 60px;
}
@media all and (max-width: 1024px)
{
#bloc_page
{
width: auto;
}
}
/* Header */
header
{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* Footer */
#legal, #legal a
{
color: #3E3E3E; /* Onyx */
}
footer {
height: 0px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
margin-top: auto;
}
footer.php
<footer style="background-color: #110E0E; /* Smoky Black */">
<div id="social">
<p>StoryShare sur les réseaux sociaux :</p>
<div id="liens">
<a href="https://discord.gg/ZmTtpcG"><img src="ressources/images/discord-logo.png" alt="Logo Discord" width="50" height="50"></a>
</div>
<div id="legal">
<p><a href="mentions_legales.php">Mentions légales</a> -
<a href="cgu.php">Conditions générales d'utilisation</a> -
<a href="politiqueconfi.php">Politique de confidentialité</a></p>
</div>
</div>
</footer>
Ce que je veux
Enfin obtenir un pied de page en bas de page quel que soit la quantité d'éléments présents dans la page.
Ce que j'obtiens
J'obtiens un pied de page collé au reste et en bas DES ELEMENTS et non de la page
Ou un pied de page en plein milieu de la page.
Regardez l'image pour comprendre.
https://imgur.com/g7jFrvL