Component height 100% in Angular 2
<p>The give example is based on the default Angular 2 skeleton created by <code>ng init</code>.</p>

<p>Lets assume I want my main component to fill the entire screen with a blue background.</p>

<p><strong>app.component.css</strong>:</p>

<pre><code>my_component_div {
    background-color:lightblue;
    height:100%;
}
</code></pre>

<p>(global) <strong>styles.css</strong>:</p>

<pre><code>html, body {
    height: 100%;
    margin:0; padding:0;
}
</code></pre>

<p>This is the result:</p>

<p><img src="https://i.stack.imgur.com/OZLwL.png" alt="visible_scrollbar"></p>

<p>I do not want a scroll bar. I don't like scroll bars. Why is there a scroll bar? Why is there a white border on top? According to inspection (<a href="https://i.imgur.com/5ykyYHm.png" rel="nofollow noreferrer">see screenshot</a>), this padding-margin-something in the top is <em>outside of body</em>, yet <em>inside of html</em>. How can this totally basic functionality be achieved?</p>