Impostare altezza automatica di un div sovrapposto ad un altro

[ciucciatiilcalzino]

Ciao a tutti,
sto cercando di creare due div affiancati che si trovino all'interno di un div "contenitore"
il primo é largo 50px il secondo il resto
all'interno del secondo ho messo un altro div "contenitore2"
che all'interno contiene due div larghi 100%
il primo "sopra" si deve ridimensionare a quello che resta dato che il secondo div gli ho impostato un altezza di 80px ....in pratica come ho fqatto anche per destra e sinistra dove sinistra si adatta al resto, ma sull'altezza non ci riesco
Spero di essere stato chiaro.
Mi sapete dare qualche aiuto?
Grazie

 <div style="position:relative;width:100%;height:100%;" id="contenitore">                                <div style="float:left;  width: 50px; height: 100%; border: solid 1px yellow; margin: 0px" id="sinistra">sinistra</div>                                <div style="  overflow: hidden; height: 100%; border: solid 1px blue; margin: 0px; margin-left: 50px;" id="destra">                                                                        <div style="border: solid 1px red; height: 100%; " id="contenitore2">                                        <div style="position: relative; width: auto; height:auto; border: solid 1px blue; margin: 0px; " id="sopra">                                            sopra
                                        </div>                                        <div style="position: relative; width: auto; height: 80px; border: solid 1px blue; margin: 0px;" id="sotto">                                            sotto                                        </div>
                                    </div>

                                </div>

[fcaldera]

> il primo "sopra" si deve ridimensionare a quello che resta


nel senso che il div sopra deve essere alto quanto la pagina completa meno 80 px del div sotto oppure intendi che il div sopra deve essere alto quanto l'altezza della viewport meno 80 px del div sotto ?

[fcaldera]

alla fine ho seguito un approccio misto, ovvero che l'area del content sia come minimo alta quanto il viewport meno gli 80px del div sottostante.

Niente float o posizionamenti, ho usato i flexbox che mi sembrano più adatti allo scopo.

http://codepen.io/anon/pen/yMzWKz?editors=1100

Nel codice ho anche inserito un lungo lorem ipsum commentato. Decommentalo per capire se il comportamento è quello desiderato. Verifica anche se il comportamento responsive va bene alzando/abbassando la finestra dell'output


Markup

<div class="wrap">
  
  <div class="wrap__leftcol">
      Colonna sinistra
  </div>
  
  <div class="wrap__main">
      <div class="wrap__content">
         content 
         <!--
         <p>
             Lorem ipsum dolor sit amet, ...  
         </p>
         -->
      </div>
      
      <div class="wrap__footer">
         footer
      </div>
  </div>
  
</div>

CSS

* {
  box-sizing: border-box; 
}


.wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    font: .8rem Roboto; 
    box-sizing: border-box; 
}


.wrap div { padding: 2px; }


.wrap__leftcol {
   width: 50px;
   margin-right: 10px;
   align-self: flex-start;
}


.wrap__main, .wrap__content {
   flex: 1;
}


.wrap__content {
   min-height: calc(100vh - 88px);  // regola l'altezza minima dopo aver rimosso bordi e padding
}


.wrap__footer {
  height: 80px;
}