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/