Absolut positioniertes div innerhalb eines divs, das den gesamten verbleibenden Platz einnimmt

Question

Ich versuche ein Layout zu erstellen, das einfach erscheint. Trotz vieler Beispiele kann ich es nicht knacken.

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

Sowohl SideBar als auch MapContainer sollten 100% Höhe haben.

Das knifflige Bit: Map muss eine definierte Höhe und Breite haben, da die mapbox-gl-js-Bibliothek ihre Dimensionen verwendet, um sie zu füllen. (Anstatt Inhalte hinzuzufügen, die sie dann vergrößern).

MapContainer existiert, weil es andere absolut positionierte Overlay-Elemente gibt.

Ich versuche zu vermeiden, die Sidebar-Breite in der Definition von MapContainer codiert, so dass ich die Sidebar in JS ausblenden/anzeigen kann, und die MapContainer automatisch füllen das Leerzeichen.

Dies wird wirklich, wirklich in der Nähe:

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

Aber sobald ich das ändern "height: 200px" auf "height: 100%", bricht es zu nichts. Was muss ich tun?

Answer 1

Verwenden Darstellungseinheiten vh stattdessen in der Regel .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

Ok, danke für die Gummi-Ducking. Ich brauche nur height: 100%;-html und body hinzuzufügen:

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