Wysokość akordeonu jquery: 100%

Question

Czekam na stworzenie witryny w stylu akordeonu z 3 pozycjami menu, które wypełnią 100% okna po rozwinięciu. Mogę znaleźć wiele różnych akordeonów, ale żaden nie działa poprawnie z wysokością: 100%

Jakieś pomysły?

Oto ogólny układ:

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

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

Answer 1

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

Będzie ona działać i jeśli używasz jakiegoś combo lub widżet, którego wielkość wzrasta po wyborze lub w wyniku jakichkolwiek działań rozmiar akordeon wzrasta, niż przez obsługę tego wydarzenia, możesz po prostu wywołać następujące;

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

do dostosowania akordeonu.

Answer 2

Można to zrobić z jQuery UI akordeon (demo):

css

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

.accordion { 
    height: 100%; 
} 

skrypt

$(function(){ 

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

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

}); 

---

nowsze wersje jQuery UI akordeon (v1.12.1 +), aby ustawić heightStylefill, użyj "odświeżyć" zaktualizować i ustawić wysokość html & ciała do 100% (demo).

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"); 
}); 

Answer 3

W niektórych wersji heightStyle: "content" nie działa, ponieważ w jquery.ui.js plik nie pobiera zmienną "heightStyle", więc można ręcznie ustawić domyślną zmienną w jquery.ui. js.

Wyszukiwanie w kodzie:

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

Zmiana:

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

Answer 4

miałem ten sam problem i:

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

naprawić go, nie ma potrzeby, aby uzyskać więcej javascript.

Answer 5

Używam 1.8.21 jquery-ui, a heightStyle: "treść" nie działa dla mnie.Przeczytałem kod i znalazłem następujące rozwiązanie:

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