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
23 réponses
Effectivement ..
Moi je laisserai le body comme il est de base, en display block.
Je virererai les min-height et les height à 100% ou 100vh pour commencer, et tu les remettra uniquement la ou il y en a besoin.
Je virerai aussi les position relative et absolute pour le moment aussi. Parce que nativement, le footer est sensé arriver à la suite de ton contenu.
Déjà tu y verra plus clair, et le footer devrai être pas mal ;)
Bonsoir.
Pour commencer tu as un problème de définition:
height: 0px;Si tu définis une hauteur de 0 pixel, tu auras forcément un problème pour le voir ton élément.
Au passage, il est inutile de définir l'unité lorsque la valeur pour les pixels est de 0.
Sinon, as-tu pensé à la valeur fixed pour position ?
J'ai l'impression que tu fermes la première balise div un peux trop bas, donc à remplacer par:
<footer style="background-color: #110E0E;">
<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>
<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>
</footer>Comme te l'a dit Lartak, je pense que tu devrais essayer une position fixed.
Tu peux aussi lui préciser un bottom: 0; pour qu'il soit toujours en bas de l'écran.
J'ai essayé de faire comme vous me l'avez demandé mais néanmoins, je n'ai pas obtenu le bon résultat :/
Le pied de page reste bloqué, certes, en bas de l'écran, mais pas de la page. En effet, quand je scrolle, le pdp reste en basde l'écran.
J'ai également eu quelque chose de bizarre, ma page s'est allongée...
( Voir le gif : https://imgur.com/Vd0jgvI )
Ah ! L'allongement de la page, c'est un problème d'un autre système
Donc pas en rapport avec ça
Ben le soucis effectivement c'est que si tu veux bloquer le footer en bas de la fenetre de ton navigateur, mais que tu as trop de contenu. Donc ça passe en dessous..
Mais du coup, comment je peux faire ?
Ce pied de page est vraiment un calvaire pour tout dire...
Pour fixer le pied de page tu fais grosso-modo un :
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
align-self: end;
}
</style
<body>
<div class="site-container">
Tout le site passe dans cette div
</div>
<footer class="footer">Footer fixé en bas de page</footer>
</body>Malheureusement, même en essayant cette solution, le pdp reste en bas de l'écran mais pas de la page, ce qui fait qu'il empiète sur la page...
Je vais me répéter mais je ne comprends pas ce que tu cherches à faire en fait :)
D'un côté tu veux qu'il soit fixé en bas de l'écran, mais de l'autre qu'il reste après le contenu de ta page .. Si il est fixé en bas de l'écran, mais que tu as trop de contenu, inevitablement, le contenu passera par dessus ou par dessous.
Et si tu veux qu'il soit quoi qu'il arrive après ton contenu, sa position ne peux pas être fixe ..
Ah, j'ai du mal formuler ma demande.
En fait, je souhaiterais que le pied de page soit en dessous du contenu, comme sur le site Grafikart.
Ce que j'évite, justement, c'est qu'il soit fixé en bas de l'écran
Ah d'accord, effectivement, ce n'est pas la même chose :)
Je réponds rapido sans tout relire donc j'espère que je ne dirai pas de connerie mais dans le style de ton footer il y a plusieurs choses à enlever :
• height: 0px;
• position:absolute;
• bottom:0px;
• left:0px;
Normalement si tu vire ça, il devrait suivre ton contenu normalement
Mon footer est têtu ! Toujours pas...
J'ai également essayé de supprimer l'include php mais ça ne change rien. Il ne se met pas sous le contenu...
Je viens de re regarder un peu ton code, je pense qu'il doit y avoir des soucis entre tous tes min-height a 100% ou tes height à 100vh.
Ensuite, ton body est en display-flex, en colonne. Pourquoi tu l'as géré comme ça ?
Eh non, ce foutu footer continu à rester en bas de l'écran. J'ai enlevé tout ce qui a été dit, même sur le html{}. Mais ça ne fait rien du tout
Je le marque comme résolu, mais s’il me fait encore des caprices, je le rouvrirais.
Merci beaucoup de votre patience et de votre aide !