Menu vertical qui prend toute la hauteur de la page

Par chnouky, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Bonjour,

Je travaille actuellement sur un thème wordpress custom. J'utilise bootstrap pour avoir un thème completement responsive.
J'ai fais en sorte que mon menu ne soit pas horizontal mais vertical, pour le moment pas de soucis.
Sauf que j'aimerai que mon menu parte du haut de ma page et descende j'usqu'en bas, et cela pour n'importe quel taille d'écran. Qu'il prenne toute la hauteur de la page.

Je n'arrive pas à faire en sorte que mon menu reste "collé" au bas de ma page...

Quelqu'un sait comment je dois m'y prendre ? J'ai essayé en faisant un height:100%; sur mon menu mais cela ne fonctionne pas...

Merci

9 réponses

MrCastor, il y a 10 ans

Salut,

Si tu veux que ton menu fasse l'intégralité de la hauteur de ta page et qu'il ne bouge pas même en scrollant :

nav { position: fixed; height: 100%; }
skank, il y a 10 ans

peux etre que ça marche

.menu{ position:fixed; top:0; bottom:0; left:0; width:100px }

sinon avec un peux de js

$('.menu').css('height', $(window).height()+'px');
Louis2304, il y a 10 ans

Hello,

Tu veux un gros, que le menu soit collé au bas de ta page ? Du coup je te conseil le code de Bootstrap (http://getbootstrap.com/examples/sticky-footer-navbar/)

<footer class="footer"> <div class="container"> <p class="text-muted">Tu peux mettre le code d'une navbar ici par exemple. :)</p> </div> </footer>
Flitflit, il y a 10 ans

Tu as aussi en css height : 100vh

Tralala8, il y a 10 ans

Salut chnouky,

Est-ce que ceci ressemble à ce que tu veux faire ?

balo, il y a 10 ans

Si tu veux mettre une hauteur de 100%, il faut que tous les éléments parents aient une hauteur définie également (jusqu'à la balise "html").

html, body, .menu { height: 100% }
Kiv, il y a 10 ans

Je pense qu'en JS ça fera l'affaire

// Récupère la hauteur de l'écran var MenuHeight = $(window).height(); // Ensuite, ajoute la valeur à ton menu $('#MyMenu').css("height",MenuHeight);

Désormais ton menu prend toute la hauteur de ton écran

mxmaxime, il y a 10 ans

Utiliser du js pour ça? Mh mauvaise idée.

Defy, il y a 10 ans

Utiliser du js pour ça? Mh mauvaise idée.

et de plus inutile complet