Angular 2中的组件高度100％

Question

给出示例基于ng init创建的默认Angular 2骨架。

让我们假设我希望我的主要组件用蓝色背景填充整个屏幕。

app.component.css ：

my_component_div {
    background-color:lightblue;
    height:100%;
}

（全球） styles.css ：

html, body {
    height: 100%;
    margin:0; padding:0;
}

结果如下：

我不想要滚动条。我不喜欢滚动条。为什么有滚动条？为什么顶部有白色边框？根据检查（see screenshot），这个填充边距 - 顶部的东西是在body 之外，而在html 之内。如何实现这一完全基本的功能？

Answer 1

也许

my_component_div {
    background-color:lightblue;
    height:100vh;
}

html, body {
    height: 100vh;
    margin:0; 
    padding:0;
    overflow: auto;
}

Answer 2

这是因为，由于聋人，你的角度成分正在使用<h1>app works!</h1>

浏览器有一些内置的默认CSS，它为你的H1提供了0.67em

的边距

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

尝试将h1边距设置为0，您的身体将与您的窗口重新对齐。

h1 {
    margin:0;
    padding: 0.67em 0;
}

Answer 3

您需要尝试使用以下链接中提到的重置css- CSS重置，通常是压缩（缩小）的CSS规则集，它将所有HTML元素的样式重置为一致的基线。

http://cssreset.com/what-is-a-css-reset/