Question

尝试将空状态置于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>

仍然没有去。空状态具有我想要的全宽，但不是我想要的高度。

请帮帮我。

Answer 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和offset＃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>

全宽和高空状态？

1 个答案: