被垂直滚动条污染的简单 CSS 网格答案

【问题标题】：simple CSS Grid tainted by Vertical scrollbar被垂直滚动条污染的简单 CSS 网格
【发布时间】：2018-06-07 13:48:15
【问题描述】：

我用 CSS Grid 布局的 Angular 应用程序在看起来像主体的地方有一个垂直滚动条。我在正文上设置了零边距，我的网格模板行加起来为 100。我不知道还有什么其他因素可能导致这种情况。这是我的堆栈闪电战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;
  }

感谢您的见解！

【问题讨论】：

标签： html angular css css-grid

【解决方案1】：

你需要：

html, body { margin: 0; }

【讨论】：

【解决方案2】：

app.component.css 中的样式未应用的原因是，Angular 只会将您指定的样式应用于该特定组件。因此，无论您在app.component.css 中给出的任何样式，它都将仅应用于app.component.html。这是为了确保您在一个组件中应用的 css 不会影响其他组件的样式。

既然<body> 是index.html 的一部分，你需要给予

body{
    margin:0px;
}

在styles.css。您可以将其视为全局样式。

编辑：在您的index.html 中，即使body 标签不存在，Angular 也会添加这些html、head 和body 标签，因为它必须在索引页面中插入已编译的脚本。

【讨论】：

【解决方案3】：

body 标签有一些默认边距。

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

或者更新#page样式，考虑到body标签的默认边距

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

【讨论】：