Le pied de page ne reste pas en place après que j'utilise le flotteur

Question

Je travaille sur un site Web réactif. J'ai essayé TOUT et mon pied ne restera pas en bas. C'est parce que j'ai utilisé float: left. Je ne veux pas que ce soit corrigé, je veux que cela n'apparaisse que lorsque je défile au bas de la page. C'est mon code:

EDIT: ok donc j'ai pris position: absolute out et maintenant ça marche sur les pages qu'il n'avait pas auparavant. mais sur les pages où je n'ai pas utilisé float: à gauche ça ne marche plus.

footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 1.2em; 
 
    background-color: #24478f; 
 
    color: black; 
 
    text-align: center; 
 
    font-family: Calibri; 
 
    font-size: 4vw; 
 
    max-width: 100%; 
 
    clear: both; 
 
} 
 

 
#container figure { 
 
    width: 100%; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
... 
 
@media only screen and (min-device-width: 1000px) { 
 
    #container figure { 
 
    width: 33%; 
 
    display: block; 
 
    overflow: hidden; 
 
    } 
 
}

<section id="container"> 
 
    <figure> 
 
    <a href="Portfolio.html#applications"> 
 
     <img src="../imgs/74599-200.png"> 
 
    </a> 
 
    <figcaption>Multimedia Applications</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#retrieval"> 
 
     <img src="../imgs/info1600.png"> 
 
    </a> 
 
    <figcaption>Information Retrieval</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#games"> 
 
     <img src="../imgs/3281-200.png"> 
 
    </a> 
 
    <figcaption>Computer Games</figcaption> 
 
    </figure> 
 
</section> 
 

 
<footer> 
 
    <p> Infia Abelha</p> 
 
</footer>

Answer 1

position supprimer: absolue et il fonctionne

footer { 
 
    width: 100%; 
 
    height: 1.2em; 
 
    background-color: #24478f; 
 
    color: black; 
 
    text-align: center; 
 
    font-family: Calibri; 
 
    font-size: 4vw; 
 
    clear: both; 
 
} 
 

 
#container figure { 
 
    width: 100%; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
... 
 
@media only screen and (min-device-width: 1000px) { 
 
    #container figure { 
 
    width: 33%; 
 
    display: block; 
 
    overflow: hidden; 
 
    } 
 
}

<section id="container"> 
 
    <figure> 
 
    <a href="Portfolio.html#applications"> 
 
     <img src="../imgs/74599-200.png"> 
 
    </a> 
 
    <figcaption>Multimedia Applications</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#retrieval"> 
 
     <img src="../imgs/info1600.png"> 
 
    </a> 
 
    <figcaption>Information Retrieval</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#games"> 
 
     <img src="../imgs/3281-200.png"> 
 
    </a> 
 
    <figcaption>Computer Games</figcaption> 
 
    </figure> 
 
    <div style="clear:both;"></div> 
 
</section> 
 

 
<footer> 
 
    <p> Infia Abelha</p> 
 
</footer>

Answer 2

afin de le faire, vous pouvez utiliser min-hauteur pour votre section comme celui-ci

#container{min-height:500px}  

et définir la position de pied de page par rapport à

footer{position:relative}