为什么简单的 html 和 css 在 Angular 2 项目与 vanilla html 网站中的工作方式不同答案

【问题标题】：Why is simple html and css working differently in an Angular 2 project vs vanilla html website为什么简单的 html 和 css 在 Angular 2 项目与 vanilla html 网站中的工作方式不同
【发布时间】：2026-01-13 08:50:01
【问题描述】：

以下 html/css 在使用 Angular CLI 使用“ng new ProjectName”创建的新 Angular 项目中的工作方式不同。我将 CSS 添加到 app.component.css 或 styles.css 并将 html 添加到 app.component.html。在 Angular 版本中，它好像忽略了我的身高。在 sidenav 或内容部分滚动时，标题不会保持固定。

更新：我注意到从 Angular 版本中删除 app-root 标记时一切正常。为什么 app-root 导致这不起作用。

工作 HTML/CSS：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2 {
  display: flex;
  flex: 1 0 0;
}
.header {
  height: 64px;
    background-color: red;
}
.sidenav {
  flex: 0 0 250px;
    background-color: yellow;
}
.main-content {
  flex: 1 0 0;
  background-color: blue;
}
.sidenav, .main-content {
  overflow-y: scroll;
}

<div id="row1">
    <div class="header"></div>
</div>
<div id="row2">
    <div class="sidenav">        Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>
    </div>
    <div class="main-content">
        Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>
    </div>
</div>

这是 Angular 2 的输出：（请注意，我在 css 文件中添加 css，就像在上面的 sn-p 中一样，Angular 将 ngcontent 标签和其他 flex 样式添加到其中刚刚从 chrome 开发者工具中添加）

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2[_ngcontent-c0] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.header[_ngcontent-c0] {
  height: 64px;
}
.sidenav[_ngcontent-c0] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 250px;
          flex: 0 0 250px;
}
.main-content[_ngcontent-c0] {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.sidenav[_ngcontent-c0], .main-content[_ngcontent-c0] {
  overflow-y: scroll;
}

<html><head>
  <meta charset="utf-8">
  <title>FlexTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
<body>
  <app-root _nghost-c0="" ng-version="4.0.3">
  <div _ngcontent-c0="" id="row1">
  <div _ngcontent-c0="" class="header">HEADER</div>
</div>
<div _ngcontent-c0="" id="row2">
  <div _ngcontent-c0="" class="sidenav">
    Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
        Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
            Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
  </div>
  <div _ngcontent-c0="" class="main-content">
    Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
      Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
          Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">
  </div>
</div>
</app-root>

</body></html>

【问题讨论】：

问题示例在哪里？没有人会猜测有什么不同。见minimal reproducible example
问题示例需要在一个新的 Angular 项目中创建。不确定我是否可以通过网络 sn-p 做到这一点。所以我希望有人可以将 sn-p 放在他们拥有的现有 angular 项目中，或者快速创建一个新的项目并将其弹出以重现问题。
浏览器中的结果仍然只是 html 和 css。所有这些都可以从浏览器开发工具中轻松复制
@charlietfl 感谢您的建议，帖子已更新。

标签： javascript html css angular typescript

【解决方案1】：

您无法将 CSS 中的 <body> 标记设置为添加到具有默认视图封装 ViewEncapsulation.emulated 的组件的样式。如果您想在 Angular 应用程序之外设置样式，请将 CSS 添加到 index.html。

作为一种技巧，您可以通过设置禁用视图封装

@Component({
  encapsulation: ViewEncapsulation.none,

【讨论】：

非常感谢您提供此信息。即使我使用外层 Styles.css 文件，这是否适用？
适用什么？什么是外层 Styles.css 文件？
我相信 Angular CLI 会将其添加到项目的 src（根）文件夹中。文件顶部的注释如下： /* 您可以将全局样式添加到此文件，也可以导入其他样式文件 */ 我认为这将是 html、正文代码的理想位置。
只需检查它的添加位置。如果它被直接添加到index.html，那么你可以设置body元素的样式，如果它被添加到组件样式中（这些样式将_ngcontent-c0属性添加到选择器中），那么它被添加到组件中。我没有使用 Angular CLI。
好吧，我将正文、html 代码放在 index.html 头部的样式标记中，但仍然是同样的问题。它必须是 Angular 中标准的其他一些功能，它把这搞砸了。如果您查看我的 Angular sn-p html，底部似乎有一堆 JS 导入。