html - 占据所有剩余空间的 div 中的绝对定位 div

Question

我正在尝试制作一个看似简单的布局。尽管看了很多例子，我还是无法破解它。

SideBar| .......MapContainer......
SideBar| ..........Map............
SideBar| .......MapContainer......

SideBar 和 MapContainer 都应该是 100% 高度。

棘手的一点: map 必须有定义的高度和宽度，因为 mapbox-gl-js 库使用它的尺寸来填充它。 (而不是添加内容然后调整它的大小)。

MapContainer 的存在是因为其中会有其他绝对定位的叠加元素。

我试图避免将边栏宽度编码到 MapContainer 的定义中，这样我就可以在 JS 中隐藏/显示边栏，并让 MapContainer 自动填充空间。

这变得非常非常接近:

* {
  box-sizing: border-box;
}

.sidebar, .mapcontainer, .container {   
  height: 200px; 
}

.container {
  width:100%;
  border:1px solid;
  display: flex
}
.sidebar {
    width:200px;
    background:lightblue;
}
.mapcontainer {
  width:auto;
  background:lightgreen;
  position:relative;
  flex-grow: 1;
}

.map {
  width: 100%;
  height: 100%;
  position:absolute;  
  border: 20px dashed grey;
  
}

<div class="container">
    <div class="sidebar"></div>
    <div class="mapcontainer">
      <div class="map">

      </div>
    </div>
</div>

但是一旦我将“高度:200px”更改为“高度:100%”，它就会崩溃。我需要做什么？

Answer 1

在 .sidebar, .mapcontainer, .container 规则中使用视口(viewport)单位 vh

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
.sidebar, .mapcontainer, .container {   
  height: 100vh; 
}
.container {
  border: 1px solid;
  display: flex
}
.sidebar {
    width: 200px;
    background:lightblue;
}
.mapcontainer {
  background:lightgreen;
  position:relative;
  flex-grow: 1;
}
.map {
  width: 100%;
  height: 100%;
  position:absolute;  
  border: 20px dashed grey;  
}

<div class="container">
    <div class="sidebar"></div>
    <div class="mapcontainer">
      <div class="map">

      </div>
    </div>
</div>