全宽全高空状态？答案

【问题标题】：Full width and height empty state?全宽全高空状态？
【发布时间】：2017-05-19 11:41:13
【问题描述】：

试图在app-header 下方创建一个空状态。我希望它占据整个屏幕的全宽和全高（减去app-header 的高度）。

到目前为止，我有这个，但它似乎不起作用：

<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>

还是不行。空状态具有我想要的全宽，但不是我想要的高度。

请帮帮我。

【问题讨论】：

见this question

标签： css polymer material-design polymer-1.0

【解决方案1】：

有几种方法可以做到这一点。您可以使用flex-box（解释为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>

您也可以简单地绝对定位您的元素。只需考虑 app-header 的高度并将 #empty-state 偏移此高度。像这样：

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>

【讨论】：