Высота гармошки Jquery: 100%

Question

Я хочу создать веб-сайт в стиле аккордеона с 3 пунктами меню, которые при раскрытии заполняют 100% окна.Я могу найти много разных аккордеонов, но ни один из них не работает должным образом с высотой: 100%

Есть идеи?

Вот общая схема:

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

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

Answer 1

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

Это будет работать, и если вы используете какой-либо комбо или виджет, размер которого увеличивается после выбора или из-за какого-либо действия, размер аккордеона увеличивается, чем при обработке этого события, вы можете просто вызвать следующее:

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

чтобы настроить гармошку.

Answer 2

Вы можете сделать это с помощью jQuery UI Accordion ( demo ):

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

});

---

Для более новых версий jQuery UI Accordion (v1.12.1 +) установите heightStyle на fill, используйте «refresh» для обновления и установите html и рост тела на 100% ()демо ).

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

Я использую 1.8.21 из jquery-ui, и heightStyle: «content» не работает для меня.Я прочитал код и нашел следующее решение:

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

Answer 4

В некоторых версиях heightStyle: "content" не работает, потому что jquery.ui.js не включает переменную "heightStyle", поэтому вы можете установить переменную по умолчанию вручную в jquery.ui.js .

Найти в коде:

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

Изменить на:

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

Answer 5

У меня была такая же проблема и:

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

исправлено, больше нет необходимости в javascript.