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

Posted 2023-03-05

【中文标题】占所有剩余空间的 div 中的绝对定位 div

【英文标题】：Absolute-positioned div within a div that takes all remaining space

【发布时间】：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%”，它就会崩溃。我需要做什么？

【参考方案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>