Full width and height empty state?

Question

Trying to make an empty state placed below an app-header. I want it to take the full width and full height (minus the height of the app-header) of the entire screen.

So far, I have this, but it doesn't seem to work:

<app-header-layout>
    <app-header>
        .....
    </app-header>
    <div id="empty-state" style="width: 100%; height: 100%; background: #F00; white-space: nowrap;">
        .....
    </div>
</app-header-layout>

Still no go. The empty state has the full width that I want, but not the height that I want.

Please help me out.

see [this question](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — chester, Jan 05 '17 at 02:33

score 0 · Answer 1 · edited May 23 '17 at 12:16

There's a couple way to do this. You can use a flex-box (explained here):

body,
html {
  height: 100%;
}
body {
  margin: 0px;
  display: flex;
  flex-direction: column;
}
app-header {
  min-height: 50px;
}
#empty-state {
  overflow: auto;
  background: #F00;
  flex-grow: 1;
  overflow: auto;
}

<body>
  <app-header>...</app-header>
  <div id="empty-state">
    .....
  </div>
</body>

You can also simply absolutely position your elements. Simply account for the height of app-header and offset #empty-state by this height. Like this:

body,
html {
  height: 100%;
}
body {
  margin: 0;
}
app-header {
  width: 100%;
  height: 50px;
}
#empty-state {
  position: absolute;
  top: 50px;
  bottom: 0;
  background: #F00;
  width: 100%;
}

<app-header-layout>
  <app-header>
    .....
  </app-header>
  <div id="empty-state">
    .....
  </div>
</app-header-layout>

Full width and height empty state?

1 Answers1