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需要所有剩餘空間

回答

相關問題