CSS/AngularJS: Аккордеон, как сноска - вопросы, стайлинг

Question

Я пытаюсь построить структуру страницы, как так:

+---------------------------+ 
| Auto-fill/v scrollable ^| 
|       || 
|       || 
|       v| 
+---------------------------+ 
| Fixed    [][][]| 
+---------------------------+ 
| Fixed - Collapsable  | 
+---------------------------+ 

Где [] являются кнопки.

У меня есть Plunk, которая аппроксимирует выше структуру, но есть некоторые вопросы:

• (решена) Вертикальная полоса прокрутки области автозаполнения идет глубже, чем его собственной области. Он должен остановиться в следующем разделе.
• (решена) Заголовок первой группы аккордеона (с кнопками) не занимает его полного пространства и/или кнопки выходят из пространства заголовка.
• Поскольку я изменил область «Исправлено - Складывающийся», чтобы иметь максимальную высоту, мне нужна автоматическая вертикальная полоса прокрутки.

И небольшая проблема:

• Расстояние между аккордеоном группами является слишком большим.
• Кнопки не имеют вертикальной ориентации.

глазурь на торте:

- Было бы здорово, если «Fixed - разборная» область может быть установлена ​​на максимальную высоту с Верт скроллингом.

Любые предложения о том, как исправить это? Благодаря!

Я использовал группу аккордеона для раздела кнопок, потому что это был самый простой способ заставить его выровнять нижний аккордеон и иметь тот же стиль. Правильно, что его нельзя открывать, содержимое пустое и никогда не должно отображаться. Альтернативные способы достижения этого приветствуются.

UPDATE

Я создал обновленный Plunk, где высота нижнего колонтитула контейнера изменяется на фиксированное значение (= 250, а также максимальную высоту), делая контейнер MainContent сжиматься и расширяться соответственно.

ОБНОВЛЕНИЕ - часть 2

Я установил второй выпуск (заголовок стилизации выключен):

<accordion-group is-open="false" is-disabled="true"> 
    <accordion-heading> 
    <a ng-href="" unclickable>&nbsp;</a> 
    <span class="pull-right"> 
     <button class="btn-xs btn-primary">Save</button> 
     <button class="btn-xs btn-primary">Cancel</button> 
     <button class="btn-xs btn-primary">Close</button> 
    </span> 
    </accordion-heading> 
</accordion-group> 

Как вы можете видеть, я добавил это отключенной = «истина», чтобы убедиться, что аккордеон не может быть открыт на 100%.

Причина, по которой фон был частично заполнен, состоял в том, что контент отсутствует. По этой причине я добавил неразрывное пространство. Однако это будет означать, что зависание над ним предоставит вам «ручной» курсор, который может смутить людей.Поэтому я добавил директиву, чтобы курсор «по умолчанию», при наведении курсора мыши:

app.directive("unclickable", function() { 
     return { 
      restrict: "A", 
      scope: false, 
      controller: function ($scope, $element) { 
       $element.bind("click", function() { 
       document.getElementById("top").focus(); 
       }); 
       $element.bind("mouseover", function() { 
        $element.css("cursor", "default"); 
       }); 
      }, 
      link: function ($scope, $elem, $attrs) { 
      } 
     } 
    }); 

Очень небольшая проблема: Если вы нашли неразрывный пробел и нажмите на нее, то фокус будет на нем. Фокусировка на клике (re) не работает.

Answer 1

вы можете добавить этот CSS:

.pull-right 
{ 

    position:fixed; 
} 

Answer 2

Чтобы исправить проблемы вертикальной полосы прокрутки вы можете установить position: fixed также к вашему .maincontent, что-то вроде этого:

.maincontent { 
    position:fixed; 
    top: 40px; 
    bottom: 85px; 
    right: 0; 
    left: 0; 
    overflow: auto; 
} 

Затем вы можете настроить top и bottom, чтобы соответствовать размеру заголовка/нижнего колонтитула.

UPDATE:

В вашем примере весь документ прокрутки (отсюда и полоса прокрутки с полной высоты окна), если вы хотите, чтобы ограничить полосу прокрутки, вы должны прокручивать внутри элемента, в вашем случае .maincontent. overflow: auto позаботится об этом (docs): он добавляет полосы прокрутки внутри div. Остальная часть кода - это просто фиксированное позиционирование, чтобы заполнить оставшееся пространство в макете.