div中的绝对定位div占用所有剩余空间

Question

我试图制作一个看似简单的布局。尽管看了很多例子，但我无法破解它。

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

SideBar和MapContainer都应该是100％的高度。

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

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

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

这真的非常接近：

＆＃13;

＆＃13;

* {
  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;
  
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

但是一旦我改变了＆＃34;身高：200px＆＃34;到＆＃34;身高：100％＆＃34;，它崩溃到没有。我需要做什么？

Answer 1

在vh规则

中使用视口单元.sidebar, .mapcontainer, .container

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

Answer 2

好的，谢谢你的橡皮鸭。我只需要将height: 100%;添加到html和body：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.sidebar, .mapcontainer, .container {   
  height: 100%;
}

.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;
  
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;