Bootstrap 3 menu mobile 100% de la hauteur

Quelle est la meilleure méthode pour arriver à 100% de la hauteur pour l'effondrement de bootstrap menu (mobile).

.navbar-effondrement { max-height: 100% !important; min-height: 100% !important; height: 100%;}

n'est pas vraiment travailler ici

OriginalL'auteur niksos | 2014-10-30

  1. 18

    Vous pouvez essayer d'utiliser le vh CSS unité:

    .navbar-collapse {
    height: 100vh;
}
    Aussi n'oubliez pas de remplacer le max-règle de hauteur. Sinon, cela a fonctionné parfaitement.
    Je suis en utilisant navbar-fixed-bas avec cela et il obtient 100% de la hauteur, mais cache les premiers li éléments. Des idées pourquoi?
    Chaque fois que je clique sur le hamburger icône et la barre de navigation s'ouvre, pour un moment, je peux voir la barre de navigation en plein écran (hauteur sage), mais ensuite, il va tout d'un coup retour à la hauteur par défaut (en fonction du nombre d'éléments dans la barre de navigation). J'ai essayé de régler la hauteur à l'aide de js, mais l'effet est le même.
    cela ne fonctionne pas lorsque vous avez plus d'éléments de menu ou des liens qui peuvent tenir sur un seul écran et vous avez besoin d'un parchemin. Donner .navbar-collapse 100vh ne vous laissera pas voir les derniers liens dans votre menu.

    OriginalL'auteur cvrebert

  2. 14
    .navbar-collapse.collapse {
    transition: height 0.2s;
}
.navbar-collapse.collapsing {
    height: 0 !important;
}
.navbar-collapse.collapse.in {
    max-height: none;
    height: 100vh;
}
    Cela devrait être la bonne réponse +1 Merci

    OriginalL'auteur jteks

  3. 4

    Aucune des réponses précédentes a fonctionné pour moi. Mon .navbar-collapse a position: fixed; mais je suppose que c'est également le cas pour la question d'origine.

    La clé pour résoudre ce fut à l'enfant l'élément de .navbar-collapse avoir height: 100vh.

    Note: je suis en utilisant Bootstrap 4, donc collapse.in est maintenant collapse.show.

    Code HTML:

    <div id="main-nav" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

    (S)CSS:

    .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.navbar-collapse.collapse.show {
    height: 100vh;
}
.navbar-nav {
    height: 100vh;
}
    Seule solution qui a fonctionné pour moi en utilisant Bootstrap 4. Merci beaucoup!

    OriginalL'auteur JKL

  4. 1

    ...tous les éléments parents jusqu'à html doit avoir de la hauteur:100% appliquées afin de travailler...

    html,
body,
#possibleparentelem {
 height:100%;
}

    edit: aussi, dans certains navigateurs, doit être appliqué dans le haut du document dans l'ordre pour qu'il fonctionne correctement

    OriginalL'auteur scooterlord

  5. 1

    Cela fera l'affaire!

    .navbar-collapse { 
    max-height: 100% !important; 
}

    OriginalL'auteur UXTY

  6. 1

    Je réalise que c'est une vieille question, mais aucune des réponses complètement fonctionné pour moi. Le CSS qui fonctionne est de mettre toute la hauteur sur le navbar-nav:

    .navbar-nav {
     float: none!important;
     margin-top: 7.5px;
     height: 100vh;
}

    https://www.bootply.com/EGHMYmOz2e

    OriginalL'auteur Zim

  7. 1

    Si quelqu'un est confronté à la hauteur de la branler où l'on peut voir le désiré barre de navigation de la hauteur pour un moment et puis hauteur remonte à défaut, celles-ci peuvent essayer de régler la hauteur à l'aide de js.

    var mywindow = $('body'), navbarCollap = $('.navbar-collapse');

        navbarCollap.on('shown.bs.collapse', function(x) {
            navbarCollap.addClass('make-full');
        });
        navbarCollap.on('hidden.bs.collapse', function(x) {
            navbarCollap.removeClass('make-full');
        });

    et c'est mon make-full classe avec une animation sur navbar-collapse

    @keyframes full-it{
    from { height: 50vh}
    to { height:100vh}
}

.navbar-collapse.make-full {
    animation-name: full-it;
    animation-duration: 0.1s;
    /*animation-delay: 0.4s;*/
    animation-fill-mode: forwards;
}

    Même si j'avoue que ce n'est pas une très belle solution, mais c'est mieux que rien & je suis ouvert aux suggestions. Si quelqu'un connaît une meilleure façon de faire, merci de le faire partager.

    OriginalL'auteur Junaid

  8. 0

    Similaire que @jteks réponse, ça fonctionne pour moi:

    .navbar-collapse {
    max-height: none;
}

.navbar-collapse.collapse {
    transition: height 0.2s;
}

.navbar-collapse.collapsing {
    height: 0 !important;
}

.navbar-collapse.collapse.in {
    height: 100vh;
}

    OriginalL'auteur aleixfabra

  9. 0
    .navbar-nav {
    height: 100vh;
}

    Si .navbar-effondrement de ne pas animer le "bien" avec une petite quantité d'éléments de menu essayez navbar-nav à la place.

    p.s. Ne pas oublier d'appliquer seulement sur la vue mobile - media query

    OriginalL'auteur Lukas

  10. -1

    La meilleure façon de le faire est de s'assurer que le son est défini dans le bon de la propriété des médias dans votre fichier css

    dans votre fichier CSS ajouter:

    @media (max-width: 768px){ 
   .navbar-collapse { 
      height:100% !important; 
      background-color:#292929; /*to change the background if you desire*/
   } 
}

    OriginalL'auteur jfindley