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），这个填充余量在顶部的东西是体外，但里面的html。这个完全基本的功能如何实现？

Answer 1

这是因为，通过deafult，您的角度成分使用<h1>app works!</h1>

浏览器有内建的默认CSS这给你的H1的.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 2

也许

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

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

Answer 3

你需要尝试使用重置的CSS如在下面的链路 一个CSS复位提到，那重置所有的HTML元素一致的基准的造型CSS规则通常压缩（精缩）集。

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