css - React Header 计算

Question

我有一个带有页眉组件的页面，其下方是内容组件。 (包含的 div 没有 100% 高度)

我想打开从顶部(标题下方)到屏幕底部的 map 。 (使用所有空间)没有 flex，在内容组件中。

我想到的一种方法:在内容组件中获取 header 的高度(比方说 X)。我将创建一个顶部为 X、左侧为 0、右侧为 0、底部为 0 的 div(我看到 Airbnb 也在这样做)

所以我想问一下，如何获取content组件中的Header高度？你有更好的建议吗？

Answer 1

如果不需要 flex，您可以使用 display:table :

html, body {
  width:100%;
  height:100%;
  margin:0;
}
body {
  display:table;
}
.row {
  display:table-row;
  height:100%;
}
header.row {
  background:green;
  height:0;
}
main.row {
  position:relative;
}
main.row div.inner {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue
}
/* test height : 100% */
b {
  float:left;
  height:100%;
  background:gray;
  margin-left:1em;
}

<header class="row">
  <div> here comes header stuff <br/>of any height
  </div>
</header>
<main class="row">
  <div class="inner">
    <b> test to cover height</b>
  </div>
</main>