Estendere un elemento di blocco per riempire l'altezza di scorrimento verticale del 100% dell'elemento principale

Question

Ho un layout con scorrimento verticale. Uno degli elementi figlio all'interno del div scorrevole è posizionato in modo assoluto con un grande valore superiore, inducendo una barra di scorrimento verticale sul genitore. Il div padre scorrevole dispone anche di alcuni elementi div child (chiamiamoli pilastri) posizionati orizzontalmente l'uno accanto all'altro tramite posizione: assoluta e qualche valore di sinistra.

Ecco il markup HTML:

<div id="root" style="height: 250px; position: relative;"> 
<div class="stretch"> 
    <div id="container" class="container"> 
     <div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div> 
     <div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div> 
     <div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>  
     <div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;"> 
    </div>   
</div> 

e CSS:

.stretch { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute; 
    height: auto; 
    width: auto;  
} 

.container { 
    border: 2px solid; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: absolute; 
} 

.pillar { 
    border: 1px dotted red; 
    bottom: 0; 
    height: 100%; 
    position: absolute; 
    top: 0;  
} 

Voglio che i div pilastro di catturare l'intera altezza di scorrimento del "contenitore" genitore. Al momento la loro altezza è l'altezza del cliente dei genitori (non l'altezza di scorrimento). Quindi quando scorri verso il basso noterai che i pilastri non riempiono tutta l'altezza disponibile all'interno del troppo pieno: scorrere.

Qualcuno può suggerire modifiche alle classi CSS (.container e/o .pillar) per farlo funzionare.

Ecco un link per violino js che mostra lo stesso problema: http://jsfiddle.net/AshwinPrabhuB/2o5whkmq

Grazie!

Answer 1

Dopo molti esperimenti e tiri di capelli, ho finalmente capito che non esiste una soluzione CSS perfetta per questo problema.Mi piacerebbe se qualcuno potesse dimostrarmi sbagliato.

Il problema a quanto mi risulta è, non c'è modo tramite CSS compatibile cross browser puro per un elemento figlio di allungare in verticale 100% di riempire i suoi genitori scrollHeight, se l'altezza dei genitori non è esplicitamente definito.

Quindi, con la conclusione di cui sopra, ho risolto il problema posizionando un div in modo esplicito sotto il contenitore a scorrimento e impostando un'altezza minima esplicita sui pilastri. Posso calcolare l'altezza di questo nuovo intermediario tramite JavaScript.

Ecco il codice HTML modificato (solo il div fixedMinHeight è nuovo)

<div id="root" style="height: 250px; position: relative;"> 
<div class="stretch"> 
    <div id="container" class="container"> 
     <div id="fixedMinHeight" class="stretchFixed"> 
      <div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div> 
      <div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div> 
      <div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>  
      <div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;"> 
     </div> 
    </div>   
</div> 

e il CSS (.stretchFixed è un'aggiunta da prima)

.stretch { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute; 
    height: auto; 
    width: auto;  
} 

.container { 
    border: 2px solid; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: absolute; 
} 

.pillar { 
    border: 1px dotted red; 
    bottom: 0; 
    height: 100%; 
    position: absolute; 
    top: 0;  
} 

.stretchFixed { 
    min-height: 375px; 
    position: relative; 
    height: 100%; 
} 

Ecco il violino collegamento con le modifiche: https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/

Alternati vely, lo stesso schema può essere applicato su ogni singolo pilastro e quindi non è necessario l'inserimento del DOM.

Mi piacerebbe essere smentito, ma per il momento posso vivere con questa soluzione alternativa.

Answer 2

Il div .pillar è data position:absolute, in modo che non sta prendendo l'altezza in base ad esso è cioè genitore, .container.

Basta rimuovere position:absolute da css di .pillar.

Ecco lo FIDDLE.

Variazioni CSS:

.pillar { 
     border: 1px dotted red; 
     bottom: 0; 
     height: 100%; 
     float:left; 
     /*position: absolute;*/ 
     top: 0; 
     left:0 !important; 
     width:32% !important; 
    } 

mi hanno dato un larghezza del 32%, perché i confini attualmente utilizzati non lasceranno che abbraccia la larghezza data. Inoltre, c'è non è necessario specificare i valori per lasciato esplicitamente per ciascuno dei pilastri ora. Quindi ho appena scavalcato questi valori.

EDIT: Ho capito male. Ora ecco quello corretto.

Assegnare l'altezza del pilastro come 100vmax. Questa unità fornirà la dimensione 100/100 della vista, come ho capito. Sebbene il registro mostri ancora valori non assegnati per le altezze. Ma immagino che sia abbastanza vicino. Inoltre, la scatola blu sta arrivando a modo suo.

Verificare FIDDLE.

.pillar { 
    border: 1px dotted red; 
    bottom: 0; 
    height: 100vmax; 
    float:left; 
    /*position: absolute;*/ 
    top: 0; 
    left:0; 
    width:32%; 
} 

Answer 3

ecco le soluzioni nella mia mente. Io penso che si debba aggiungere una div involucro all'interno del contenitore come questo:

<div id="container" class="container"> 
    <div style="height:400px;"> 
     <div id="pillar1" class="pillar" ></div> 
     <div id="pillar2" class="pillar" ></div> 
     <div id="pillar3" class="pillar" ></div>  
     <div id="fixed-and-not-movable"> 
    </div> 
</div> 

o si deve aggiungere altezza specifico per tutti i pilastri. Questo perché si sta usando height:100% sul pilastro. Quindi corrisponde all'elemento più vicino che ha un'altezza specificata. Inoltre, non so se è a causa del tuo requisito di scenario che devi aggiungere il div .stretch. In questo caso, non ti serve affatto quel div. Il codice qui sotto fa la stessa cosa del tuo.

<div id="root"> 
    <div id="container" class="container"> 
     <div style="height:400px;"> 
      <div id="pillar1" class="pillar" ></div> 
      <div id="pillar2" class="pillar" ></div> 
      <div id="pillar3" class="pillar" ></div>  
      <div id="fixed-and-not-movable"></div> 
     </div> 
    </div> 
</div>