title: Component height 100% in Angular 2
body: <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>