Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Impostare altezza automatica di un div sovrapposto ad un altro

  1. #1

    Impostare altezza automatica di un div sovrapposto ad un altro

    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



    codice HTML:
     <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>
    

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,949
    > 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 ?
    ISSlive , un bot per Telegram per trovare tutti i passaggi visibili della Stazione Spaziale Internazionale.

  3. #3
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,949
    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

    codice:
    <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

    codice:
    * {
      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;
    }
    ISSlive , un bot per Telegram per trovare tutti i passaggi visibili della Stazione Spaziale Internazionale.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.