Question

我使用CSS Grid布局的角度应用程序有一个垂直滚动条，看起来像是正文。我在身体上放置了一个零边距，我的网格模板行加起来为100.我不知道其他因素可能导致这种情况。这是我的stackblitz sample。

以下是可能存在问题的代码：

body{
    margin:0px !important;
}

#page {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-areas: "head head"
                         "nav  main"
                         "nav  foot";
    grid-template-rows: 10vh 90vh;
    grid-template-columns: 250px 1fr;
  }

感谢您的见解！

Answer 1

你需要：

html, body { margin: 0; }

Answer 2

body标签有一些默认边距。

通过在body标签上添加margin：0来删除边距。

或更新#page样式，其中考虑了body标签上的默认边距

grid-template-rows: calc(10vh - 8px) calc(90vh - 8px);

Answer 3

未应用app.component.css中的样式的原因是，angular会将您指定的样式仅应用于该特定组件。因此，您在app.component.css中提供的样式只会应用于app.component.html。这是为了确保您在一个组件中应用的CSS不会影响其他组件的样式。

由于<body>是index.html的一部分，您需要提供

body{
    margin:0px;
}

styles.css中的

。您可以将其视为全球风格。

修改：在您的index.html中，即使body标记不存在，角色也会添加这些html，head和body标记，因为它有将编译的脚本插入索引页面。

简单的CSS网格受垂直滚动条污染

3 个答案: