Bonjour,

Je viens de suivre le tuto sur les menus responsives, tous fonctionnent bien sauf un petit truc ... Je ne vois pas les 50px du bas de ma page... je vient de chercher pourquoi et mon problème se résume à cela:

<div class="site-container">
            <nav class="header-nav">
            </nav>
             <div class="site-pusher">
                <div class="content">
                /* bla bla*/
                </div>
             </div>
</div>

Mon "site-container" à une hauteur de 100%, comme le "site-pusher". J'ai retirré la barre de scroll sur le site container et j'en ai mis une sur le "content" pour que sur mobile, la barre de nav reste en haut de la page.

Le problème cest que ma fenêtre fait 590 px de haut, le "header-nav" fait 50px. Comme j'ai mis 100% à la hauteur du "site-content", il me reprend 590px.

590 px + 50px me donne 640px qui ne rentre pas dans ma fentre de 590px. Comme j'ai retirré la scroll barre, il me manque 50px que je ne peux pas voir ...

Je ne sais pas comment faire pour que les 100% soit égale à 540px ...

Merci d'avance

Methos

1 réponse


Frédéric Leon
Auteur
Réponse acceptée

Reponse simple ...
.site-pusher{height:calc(100% - 50px);}

voila :)