Jquery accordion hauteur:100%

Je suis à la recherche pour créer un accordéon de style de site web avec 3 élément de menu de remplissage de 100% de la fenêtre lors de son expansion. Je peux trouver beaucoup de différents accordéons, mais aucun ne fonctionne correctement avec la hauteur: 100%

Des idées?

Ici est la mise en page générale:

http://i.imgur.com/GLyTX.jpg

http://i.imgur.com/hOUrO.jpg

OriginalL'auteur Craig Jonathan Kristensen | 2012-01-28

  1. 28
    jQuery( "#accordion" ).accordion({
   collapsible: true,
   heightStyle: "content"
});

    Il va fonctionner et si vous êtes en utilisant un certain combo ou un widget dont la taille augmente à la suite de la sélection ou en raison de toute action de la taille de l'accordéon augmente que par la manipulation de cet événement, vous pouvez simplement appeler le suivant;

    jQuery( "#accordion" ).accordion( "resize" );

    pour ajuster votre accordéon.

    OriginalL'auteur Imran Butt

  2. 8

    Vous pouvez le faire avec jQuery UI Accordion (démo):

    css

    html, body  {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.accordion {
    height: 100%;
}

    script

    $(function(){

    $( ".accordion" ).accordion({ fillSpace: true });

    $(window).resize(function(){
        //update accordion height
        $( ".accordion" ).accordion( "resize" )
    });

});

    Pour les nouvelles versions de jQuery UI Accordion (v1.12.1+), définissez la heightStyle à fill, utilisez la commande "actualiser" pour mettre à jour et définir le html & hauteur du corps à 100% (démo).

    CSS

    html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

    Script

    $(".accordion").accordion({
  heightStyle: "fill"
});

$(window).resize(function() {
  //update accordion height
  $(".accordion").accordion("refresh");
});

    OriginalL'auteur Mottie

  3. 2

    - Je utiliser 1.8.21 de jquery-ui, et heightStyle: "content" ne fonctionne pas pour moi. J'ai lu le code et j'ai trouvé la solution suivante:

        $('.accordion').accordion({
        "autoHeight": false,
    });

    OriginalL'auteur Marek Kowalski

  4. 1

    Dans une version heightStyle: "content" pas de travail, parce que dans jquery.ui.js fichier ne se "heightStyle" variable, de sorte que vous pouvez définir manuellement par défaut de la variable dans jquery.ui.js.

    Trouver dans le code:

    $.extend( prototype.options, {
    heightStyle: null, //remove default so we fall back to old values
    ...
    .. some code ..
    ...
});

    Changement:

    $.extend( prototype.options, {
    heightStyle: "content", //remove default so we fall back to old values
    ...
    .. some code ..
    ...
});

    OriginalL'auteur Manvel

  5. 0

    J'ai eu le même problème et l':

    .collapse.in {
  height: 100%!important;
}

    fixe, plus besoin de javascript.

    OriginalL'auteur Labanino