Jquery altura de acordeón: 100%

Question

Estoy buscando crear un sitio web de estilo acordeón con 3 elementos de menú que llenan el 100% de la ventana cuando se expanden. Puedo encontrar muchos acordeones diferentes, pero ninguno que funcione correctamente con la altura: 100%

¿Alguna idea?

Aquí es el diseño general:

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

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

Answer 1

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

Se trabajará y si su están utilizando algún combo o un widget que aumenta después de la selección o de tamaño debido a cualquier acción que el tamaño del acordeón aumenta que al manejar ese evento, simplemente puede llamar a lo siguiente;

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

para ajustar su acordeón.

Answer 2

Usted puede hacer esto con jQuery UI acordeón (demo):

css

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

.accordion { 
    height: 100%; 
} 

guión

$(function(){ 

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

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

}); 

---

hay nuevas versiones de jQuery UI acordeón (v1.12.1 +), establezca la heightStyle a fill, utilizar "cargar" para actualizar y ajustar la altura del cuerpo html & a 100% (demo)

CSS

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

Guión

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

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

Answer 3

En alguna versión heightStyle: "contenido" no funciona, porque en jquery.ui.js archivo no se pone variable "heightStyle", por lo que puede configurar manualmente variable por defecto en jquery.ui. js.

Buscar en código:

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

Cambiar a:

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

Answer 4

que tenían el mismo tema y:

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

fijo que, sin necesidad de más javascript.

Answer 5

Uso 1.8.21 de jquery-ui, y heightStyle: "content" no funcionó para mí.Leí el código y encontré la siguiente solución:

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