Coller le page footer en bas des pages

[Hyruama]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://lesheritiersjdr.forumactif.com/

Description du problème

Bonjour,

Le titre n'étant peut-être pas des plus clair, ma capture d'écran indique ce que je souhaiterais faire.

Sur certaines pages "courtes", le page-footer est assez haut, et je souhaiterais qu'il colle constamment en bas des pages du forum au lieu de remonter comme ça de temps à autres. Est-ce possible ?

D'avance merci pour votre aide.

Amaury

[Hyruama]

Nouvelle tentative.

Elle se rapproche un peu de ce que je souhaite, mais j'ai un problème de placement de mon contenu, du coup, qui est trop bas, collé au footer. Je vais voir si je sais chipoter pour donner quelque chose de mieux.

J'ai ajouté ça :

Code:

body {
 margin: 0;
 min-height: 100vh;
 display: grid;
 grid-template-rows: auto 1fr auto;
}

Et le résultat :



Si vous avez la solution, n'hésitez pas.

[Pinguino]

Bonjour,

Nous avons corrigé ce problème sur la version AwesomeBB le 18 septembre dernier. Vous pouvez par exemple voir le correctif en action ici https://awesomebb.forumgaming.fr/post par exemple.

Dans votre cas, nous pensons que cela vient de vos modifications et non de la version AwesomeBB en elle-même qui n'a plus ce problème. Mais vu toutes les modifications, impossible de vous aider plus que ça malheureusement.

[Hyruama]

Bonjour.

Merci du retour.

Alors je ne sais pas si cela change quelque chose, mais je suis en ModernBB, et non pas en AwesomeBB.

[Invité]

Hello Amaury,

j'ai retrouvé le lien du sujet que tu mentionnes:
https://lesheritiersjdr.forumactif.com/f14-acceder-aux-informations-pour-les-doctes

Et le bas de page est bien en bas de mon côté sous Firefox et Chrome.





a++

[Hyruama]

Hello Milouze,

Alors, oui, ça fonctionne pour celle-là, mais si tu vas par exemple dans la liste des membres qui est une page où il y a moins d'informations (https://lesheritiersjdr.forumactif.com/memberlist), tu peux voir que tout est collé dans le bas de la page, et qu'il y a un espace de dingue dans le haut de la page (enfin ça dépend de ton écran je suppose, sur mon 27" en 1440p j'ai le problème, mais pas sur mon 24" à 1080p... On le remarque en dézoomant).

Donc comme je l'indique dans mon message précédent, j'ai le code suivant qui est actif.

Code:

body {
 margin: 0;
 min-height: 100vh;
 display: grid;
 grid-template-rows: auto 1fr auto;
}

Et le résultat est bien celui-là sur mon écran, pour les pages avec moins de contenu (comme Membres, Groupes, etc.)



On remarque l'espace énorme au-dessus du contenu.

Je ne sais pas trop sur quoi jouer.

[Invité]

Re,
je viens de tester sur mon fofo de tests Modernbb et je ne reproduis pas ton soucis.
Tu as modifié le template overall_header ?

a++

[Hyruama]

Damn.

Oui, il est modifié. Mais de là à savoir te dire ce que j'ai fait, et quand... :'/

Le voici :

Spoiler:

Et ma feuille de style CSS actuelle :

Spoiler:

[Invité]

Re,
rien de plus avec ce template de mon côté.
As tu modifié les templates suivants:
overall_footer_begin et overall_footer_end ?

a++

[Hyruama]

Oui, tout à fait. ^^'

Les voici :

Code:

<!-- BEGIN html_validation -->
<div>
 <div>
 <div>
 <div>

<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
<!-- END html_validation -->
 </div>
 </div>
 </div>
 </div>

 <div id="{ID_RIGHT}">
 <!-- BEGIN giefmod_index2 -->
 {giefmod_index2.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index2 -->
 </div>
 </div>
 </div>
 </div>
</div>
 </div>
 </div>
 </div>
</div>


<div id="page-footer">
 <div class="wrap">
 <ul class="footerbar-system">
 <a class="icon-home" href="https://discord.gg/MhMw43AD8c" accesskey="h">Rejoins-nous sur Discord -</a> <a class="icon-home" href="http://titam-france.fr/" accesskey="h">Site Officiel -</a> <a class="icon-home" href="https://www.facebook.com/lesheritiersjdr/" accesskey="h">Page Facebook</a>
 <li class="rightside">
<!-- BEGIN html_validation -->
 </li>
 </ul>
 </div>
</div>
<!-- END html_validation -->

Et

Code:

<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
 <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
 <ul class="footerbar-user">
 <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
 <li class="rightside">
 <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
 {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
 </a>
 </li>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </div>
 <div class="copyright">
 <div class="wrap">
 <div class="copyright-body">
 {ADMIN_LINK}
            </div>
        </div>
    </div>
</div>
{PROTECT_FOOTER}

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
        
        FB.init({
            "appId"   : "{switch_facebook_login.FB_APP_ID}",
            "cookie"  : {switch_facebook_login.FB_COOKIE},
            "xfbml"   : {switch_facebook_login.FB_XFBML},
            "oauth"   : {switch_facebook_login.FB_OAUTH},
            "version" : "{switch_facebook_login.FB_VERSION}"
        });
        
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect, span.ti-connect').attr({
            "data-loc": "{switch_topicit_connect.TOPICIT_URL}",
            "data-login": "{switch_topicit_connect.BOARD_LOGIN}",
            "data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
            "data-lang": "{switch_topicit_connect.BOARD_LANG}"
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>
  <script type="text/javascript">//<![CDATA[
$(document).ready(function() {$(window).scroll(function() {var header_top = $('#headerbar-top');if (header_top.hasClass('w-toolbar')) {if ($(window).scrollTop() >= 42) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}} else {if ($(window).scrollTop() >= 1) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}}});});//]]></script>
</body>
</html>

Et si tu veux la liste de ce que j'ai modifié.

[Hyruama]

Bon, il me semblerait que j'ai trouvé une solution viable. A voir si ça ne pose pas de problème ailleurs.

J'ai donc joué sur le code que j'avais ajouté :

Code:

body {
 margin: 0;
 min-height: 100vh;
 display: grid;
 grid-template-rows: auto 1fr auto;
}

Mais j'ai remplacé par ceci en dernière ligne, en rajoutant une ligne de 3fr sur le bas de page. Ce qui a remonté le contenu à une hauteur convenable.

Code:

grid-template-rows: auto 1fr 3fr auto;

J'espère que ça ira. ^^

Merci de votre aide, et à bientôt.

[Pinguino]

@Hyruama autant pour moi désolé. Je reproduis donc bien le problème du footer ici par exemple : https://modernbb.forumactif.com/post

J'ai ouvert un ticket pour l'équipe technique. Il est donc possible que ce soit corrigé de façon native d'ici quelques semaines.