Блог

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

Я пробовал использовать

 <div class="container" style="position=relative">
    <header style="position:absolute"></header>
    <router-outlet style="position:absolute></router-outlet>
    <footer style="position:absolute></footer>
</div>
  

Все ( min-height: fit-content , max-height:100vh , min-width: 100vw ).

Я также помещу контейнер во вложенный компонент (маршрутизатор-выход), чтобы min-height: 100vh

Вот результат того, что я получаю (используя приведенные ниже предложения: flex: auto; display: flex; flex-direction: column;). Обратите внимание, что нижний колонтитул не прилипает к нижней части, несмотря на позицию: абсолютная и нижняя 0.

РЕДАКТИРОВАТЬ: это не было проблемой нижнего колонтитула / контейнера. Этот предложенный метод, который я использовал, теоретически работал. Установка правильных стилей CSS для соответствующих маршрутизируемых компонентов повлияла на выход маршрутизатора как есть.

Вы можете попробовать гибкую компоновку.

 flex: auto;
display: flex;
flex-direction: column;
  

Высота верхнего и нижнего колонтитулов может быть установлена.