Question

我想创建一个粘性页脚，如果内容高度小于视口，则该脚注会在底部；如果内容高度大于视口，则向下移动。（图像的右侧）使用以下代码可以按我想要的方式工作：

我的index.html：

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

我的styles.css：

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

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

但是，当我将页脚移动到app.component时，它不再起作用。结果看起来像图像的左侧。

我更改的index.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;
}

我认为封装存在问题。有人有想法吗？