Angular липкий нижний колонтитул больше не липкий, если внутри app.component - PullRequest
Новая
       17

Angular липкий нижний колонтитул больше не липкий, если внутри app.component

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

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

Мой индекс. html: 

<html>
<head>...</head>
<body>
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</body>
</html>

Мои стили. css: 

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

footer {
  margin-top: auto;
  background-color: #ff7e7e;
}

Однако он больше не работает, когда я перемещаю нижний колонтитул в app.component. Результат выглядит как в левой части изображения.

Мой измененный индекс. html: 

<html>
<head>...</head>
<body>
  <header>Header</header>
  <main>Main Content</main>
  <app-root></app-root>
</body>
</html>

Мой app.component. html: 

<footer>Footer</footer>

Мой app.component. css: 

footer {
  margin-top: auto;
  background-color: #ff7e7e;
}

Я думаю, что есть проблема с инкапсуляцией. У кого-нибудь есть идеи?

...