CSS - assoluto all'interno fissato con overflow per lo scorrimento e altezza 100%

Question

Sto provando ad avere una sovrapposizione scorrevole di qualche tipo che cancella il resto del sito. Non riesco a ottenere un'altezza del 100% sull'elemento assoluto all'interno del mio elemento fisso.

http://codepen.io/intellix/pen/GBltK

section { 
    background: red; 
    position: fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    overflow-x:auto; 

} 

article { 
    background: blue; 
    position: absolute; 
    top:0; 
    width:300px; 
    bottom: 0; 
    left: 0; 
} 

Se ho impostato in basso: 0; sull'elemento assoluto, riempie l'altezza quando la pagina non trabocca. Quando la pagina trabocca lascia uno spazio.

Quando uso fondo: auto sul mio elemento assoluto riempie l'altezza con troppopieno, ma lascia uno spazio vuoto senza troppo pieno!

Se si ridimensiona la finestra in modo che il contenuto si adatti e quindi ridimensiona in modo che il contenuto non lo faccia, è possibile vedere che non funziona in entrambi i casi.

Answer 1

Penso che vogliate usare min-height e bottom: auto qui.

article { 
    background: blue; 
    position: absolute; 
    top:0; 
    width: 300px; 
    bottom: auto; 
    min-height: 100%; 
    left: 0; 
} 

Il motivo è necessario min-height:100%; e non è possibile utilizzare height:100%; è perché quando il contenuto section in scorrevole è altezza è in realtà superiore al 100%.

explination Longer:

Con posizionati elementi (position: relative|fixed|absolute;), altezze percentuali sono determinati sulla base rispetto ai loro genitori offset. Nel caso dell'elemento article, l'offset genitore è l'elemento section.

L'elemento section utilizza top:0px; e bottom:0px; per determinarne l'altezza. Questi valori sono determinati dall'altezza di esso è compensato madre che è l'html elemento

html è un caso particolare in cui height:100%; è la dimensione della finestra di visualizzazione in grado, che è il motivo per cui il vostro elemento scorrevole ha un'altezza maggiore di 100% .