Как выровнять верхний и нижний колонтитулы карты, чтобы они отображались сверху и снизу доступного вертикального пространства? - PullRequest
Новая
       93

Как выровнять верхний и нижний колонтитулы карты, чтобы они отображались сверху и снизу доступного вертикального пространства?

0 голосов
/ 06 апреля 2020

Я пытаюсь установить карту в качестве оболочки дисплея внутри «sidenav», как показано ниже: 

<div class="content-container" width="100%" height="100%" >

  <nav class="sidenav clr-flex-fill clr-flex-column clr-align-content-between" height="100%" >

    <div class="card clr-flex-fill clr-flex-column clr-align-content-between" height="100%">
      <div class="card-header clr-align-self-start">
        Selections
      </div>
      <div class="card-block clr-align-self-auto">
        <app-task-side-nav>
        </app-task-side-nav>
      </div>
      <div iclass="card-footer clr-align-self-end">
        <button class="btn btn-sm btn-link">Footer Action 1</button>
        <button class="btn btn-sm btn-link">Footer Action 2</button>
      </div>
    </div>
  </nav>

  <div class="content-area" height="100%" width="100%" >
    <router-outlet class="router-flex"></router-outlet>
  </div>

</div>

Я хочу, чтобы «нижний колонтитул карты» располагался в вертикальной верхней части доступное пространство, «нижний колонтитул карты» должен отображаться в нижней части доступного вертикального пространства, а «блок карт» занимает свободное пространство между ними.

enter image description here

Я пробовал различные стили, относящиеся к clr-flex, как показано выше, но не могу это сработать. Любые предложения?

Это эквивалентно ... 

<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <nav class="sidenav">
<div class="card">
            <div class="card-header">
                Header
            </div>
            <div class="card-block">
                <div class="card-title">
                    Block
                </div>
                <div class="card-text">
                    ...
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-sm btn-link">Footer Action 1</button>
                <button class="btn btn-sm btn-link">Footer Action 2</button>
            </div>
        </div>
        </nav>
        <div class="content-area">
            ...
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 06 апреля 2020

Найден!

Стиль «карточка» имеет атрибут отображения по умолчанию «блок». Если вы переопределите это с помощью 'flex', тогда я получу выравнивание верхнего и нижнего колонтитула, которое я искал.

...