Bonjour, puis-je me permettre de demander de l'aide, j'apprends le HTML / CSS et PHP depuis quelques semaines, donc la je construis une esquisse de mon futur site ( c'est de la pratique en fait ) et je bloque sur un petit problème en CSS.

Une image aidera à comprendre mon problème, sachant que c'est fort possible qu'une ligne dans le footer toute bête mais que je ne connais pas puisse régler le problème, donc désolé si ma question a l'air un peu bebete!



En bas, vous pouvez voir que mon footer est fixed, mais je n'arrive pas à scroll down pour poursuivre ma lecture de mon article, ce qui est gênant, merci d'avance pour l'aide, j'apprécie!


HTML:


<div id="footer">
<p>Hellgels | Tous droits réservés</p>
</div>

CSS:

#footer {
text-align: center;
display: block;
background-color: DF5920;
line-height:30px;
position: fixed;
bottom: 0;
width: 100%;
}

#footer p {
color: #164a29;
font-weight: bold;
position:relative;
}

c'est à priori pas dans ces lignes que peut se résoudre le problème mais dans le reste du css.

CSS:

body {
margin: 0;
overflow-x: hidden;
}

#banner1 {
display: block;
background-color: #FF8D00;
height: 50px;
width: 100%;
}

#menu {
min-width: 500px;
width: 100%;
height: 100px;
position: relative;
background-color: #DF5920;
}

#menu ul {
float: left;
Left: 50%;
position:relative;
padding-top: 15px;
margin-left: -60px;
}

#menu ul li {
margin-left: 20px;
float: left;
list-style-type: none;
position: relative;
left: -50%;
}

#menu ul li a {
text-align: center;
padding-top: 10px;
display: inline-block;
background-color: #FF8D00;
height: 30px;
width: 100px;
color:black;
text-decoration: none;
}

#menu ul li a:hover {
color: white;
background-color: #DF5920;
}

#banner2 {
display: block;
background-color: #FF8D00;
height: 50px;
width: 100%;
}

#contenuprincipal {

display: block;
width: 900px;
margin: auto;
}

#footer {
text-align: center;
display: block;
background-color: DF5920;
line-height:30px;
position: fixed;
bottom: 0;
width: 100%;
}

#footer p {
color: #164a29;
font-weight: bold;
position:relative;
}

En théorie, si j'enlèv le ' position : fixed ' du #footer, ça régle le problème pour les pages où il y a assez de contenu, mais quand une page n'a pas assez de contenu, voila ce que ça fait : ( le footer ne reste pas en bas )

Bon j'ai résolu le problème, problème apparemment connu des webmasters en général, je marque le topic comme résolu.

Bonjour,

N'hésites pas à partager la solution, peut être que ça aidera un prochain utilisateur qui aurait le même problème.

#footer {
position:fixed;
text-align: center;
display: block;
background-color: #DF5920;
height: 60px;
bottom: 0;
width: 1000px;
}

#footer p {
color: #164a29;
font-weight: bold;
position: relative;
top: 5px;
}

Voici mon code pour mon footer, à ce moment là, il reste en bas peu importe la taille du texte, et si le texte est long, je peux scroll down, il ne va pas le cacher.

Top, merci !