2
votes

Existe-t-il un moyen d'obtenir un pied de page HTML en bas de n'importe quelle page?

Je crée mon propre site Web pour un projet. J'ai une page d'événements où je montre tous les événements à venir. Chaque fois que vous ajoutez un événement, la page s'agrandit. ATM, le pied de page est au milieu de la page car il n'y a pas assez d'événements.

Le problème est que je veux que le pied de page soit en bas de l'écran, sauf si la page est plus grande que l'écran. Si la page est plus grande que l'écran, le pied de page doit être en bas de la page.

J'ai essayé d'utiliser height: 100% ou height: 100vh mais ils mettent la hauteur sur "fit to screen", donc s'il y a par exemple 20 événements (plus gros que l'écran), le pied de page sera collé en bas de l'écran et les événements passeront par le pied de page.

La page ressemble maintenant à ceci:

et le tableau est construit comme ceci:

<table class="events-table" >
    <thead>
        <tr>
      <th class="event-time" scope="col">Date/Time</th>
      <th class="event-description" scope="col">Event</th>
    </tr>
   </thead>
    <tbody>
      <tr>
        <td>
            #_EVENTDATESÂ Â Â Â 
            #_EVENTTIMES
        </td>
        <td>
            #_EVENTLINK
            {has_location}<br/><i>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE</i>{/has_location}
        </td>
      </tr>
    </tbody>
</table>

html css height

1 commentaires

Ajoutez à votre CSS: body {min-height: 100%; }

3 Réponses :

2
votes

Jetez un œil à ceci: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c

Résumé:

utiliser un conteneur de page autour de tout sur la page
- a défini sa hauteur minimale à 100% de la hauteur de la fenêtre (vh). Comme il est relatif, ses éléments enfants peuvent être définis avec une position absolue basée sur lui plus tard.
content-wrap a un remplissage inférieur qui correspond à la hauteur du pied de page, garantissant qu'il reste exactement assez d'espace pour le pied de page à l'intérieur du conteneur dans lequel ils se trouvent tous les deux.
Le div d'emballage est utilisé ici et contiendrait tout le reste du contenu de la page.
définit le pied de page sur absolu, en restant en bas: 0 du conteneur de page dans lequel il se trouve.

HTML:

 #page-container {  position: relative;  min-height: 100vh;}

 #content-wrap {  padding-bottom: 2.5rem;    /* Footer height */}

 #footer {  position: absolute;  bottom: 0;  width: 100%;  height: 2.5rem;            /* Footer height */}

CSS:

 <body> 
       <div id="page-container">   
            <div id="content-wrap">    
                  <!-- all other page content -->        
            </div>   
            <footer id="footer"></footer> 
       </div>
 </body>

0 commentaires

0
votes

Il existe différentes façons de faire ce que vous voulez, en fonction exactement de ce que vous voulez. Certains sites aiment avoir un pied de page qui se trouve au bas de ce qui est visible (bien que moins le font ces jours-ci), tandis que d'autres (la plupart) l'ont enraciné au bas de la page entière, vous devez donc y faire défiler, tout en vous assurant qu'il ne se trouve pas à mi-hauteur de la fenêtre visible lorsque la page est trop petite.

Vous voulez probablement ce dernier.

Il existe un guide décent pour cela ici: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Il y en a plusieurs autres sur le Web, dont celui du W3C:

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

Si vous voulez vraiment de la cohérence, vous pouvez également essayer de lancer un peu de magie php. Rien n'impressionne dans un projet de développement Web comme un peu de php!

J'espère avoir aidé.

0 commentaires

0
votes

Vous pouvez utiliser PHP pour obtenir votre pied de page sur n'importe quelle page, regardez ceci: https: / /www.w3schools.com/php/php_includes.asp Ou vous pouvez utiliser un framework comme angular

0 commentaires