Question

我的页面包含标题组件，位于内容组件下方。（包含div不具有100％的高度）

我想打开从顶部（标题下方）到屏幕底部的地图。（在内容组件中使用所有空格） without flex 。

我想到的一种方法：在内容组件中获取标题的高度（假设为X）。我将创建一个顶部的div：X，left：0，right：0，bottom：0（我看到Airbnb也在这样做）

所以我想问一下，如何在内容组件中获取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>

反应标题计算

1 个答案: