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

我正在尝试使布局看起来很简单。尽管看了很多例子，但我无法破解它。div中的绝对定位div需要所有剩余空间

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>

但只要我改变 “高度：200像素” 到 “高度：100％”，它崩溃不了了之。我需要做什么？

来源

2017-02-15 Steve Bennett ㄹ

使用视窗单位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>

来源

2017-02-15 09:03:00 LGSon

好的，谢谢你的橡皮鸭。我只需要添加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>

来源

2017-02-15 00:04:20

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

回答

相关问题