Angular 100% height resulting in 0 height

Question

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 grad1 gradient, with px, 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?

my-component.html

<div id="grad1"></div>

my-component.css

#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) */
}

app-component.html

<div>
  <app-home-display></app-home-display>
</div>
<router-outlet></router-outlet>

app-component.css is empty

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyWebApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

global styles.css

body {
  margin: 0;
}

Does this answer your question? [How to make a div 100% height of the browser window](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) — leonheess, Jan 05 '20 at 21:13

score 5 · Accepted Answer · edited Jan 05 '20 at 21:12

5

If your div has not content (text or other), its height will default to 0. If you want the div to fill the entire page you can use:

#grad1 {
    height: 100vh;

    ...
}

It means you set div height to the full browser viewport height (useful for different screen resolutions).

edited Jan 05 '20 at 21:12

leonheess

16,068
14
77
112

answered Jan 05 '20 at 17:18

pitinca

143
8

score 3 · Answer 2 · answered Jan 05 '20 at 17:16

Your problem is probably with css order. an easy way to handle it is to use flex for the parent tag (components generated). you can use :host key in css for that. example:

:host {
  display: flex;
  flex-direction: column;
  flex: 1;
}

also make sure the first element having the max height (ex min-height: 100vh; in app-root host)

Angular 100% height resulting in 0 height

2 Answers2