title: Angular 100% height resulting in 0 height
body: <p>I am working on my first angular site and i'm trying to create a gradient div which fills the rest of the screen.  When I set the height of the <code>grad1</code> gradient, with <code>px</code>, it works fine.  However, if I use a percentage like 50% or 100%, or just let it set the default height, it results in a height of zero.  What could be causing this?</p>
  
  <blockquote>
    <p>my-component.html</p>
  </blockquote>
  
  <pre><code>&lt;div id="grad1"&gt;&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>my-component.css</p>
  </blockquote>
  
  <pre><code>#grad1 {
    width: 100%;
    background-color: #b0afb4; /* For browsers that do not support gradients */
    background-image: linear-gradient(#b0afb4, #fff, #b0afb4); /* Standard syntax (must be last) */
  }
  </code></pre>
  
  <blockquote>
    <p>app-component.html</p>
  </blockquote>
  
  <pre><code>&lt;div&gt;
    &lt;app-home-display&gt;&lt;/app-home-display&gt;
  &lt;/div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>app-component.css is empty</p>
  
  <blockquote>
    <p>index.html</p>
  </blockquote>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;MyWebApp&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>global styles.css</p>
  </blockquote>
  
  <pre><code>body {
    margin: 0;
  }
  </code></pre>