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

【问题标题】：Absolute-positioned div within a div that takes all remaining space占所有剩余空间的 div 中的绝对定位 div
【发布时间】：2017-07-03 11:20:24
【问题描述】：

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

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

SideBar 和 MapContainer 都应为 100% 高度。

棘手的一点：地图必须有定义的高度和宽度，因为 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%”，它就会崩溃。我需要做什么？

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

我只需要将height: 100%; 添加到html 和body：

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

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

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

【讨论】：

【解决方案2】：

在.sidebar, .mapcontainer, .container 规则中改用视口单位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>

【讨论】：