Utilizzando position: absolute, mantenendo all'interno del flusso di documenti

Question

Si tratta di uno screenshot da una pagina attualmente sto costruendo. Sto cercando di assicurarmi che il pulsante verde sia sempre sul fondo del contenitore. Qui è un pezzo di codice:

HTML

<div class="list-product-pat"> 
    <article> 

    <!-- title, image, spec ... --> 

    <div class="pricing-pat"> 

    <!-- the button goes here --> 

    </div> 
    </article> 
</div> 

CSS

.list-product-pat article { 
    position: relative; 
    min-height: 260px; 
} 

.list-product-pat .pricing-pat { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

Finora non c'è nessun problema ... fino a quando le specifiche del prodotto diventa troppo lungo e si rompe nel pulsante verde.

voglio mantenere il pulsante verde nella posizione più in basso, ma nello stesso tempo voglio anche l'altezza di estendere, se le specifiche titolo del prodotto/prodotto diventa troppo lunga.

In un mondo ideale, dovrebbe essere qualcosa di simile:

Quindi la mia idea è quella di mantenere il posizionamento assoluto pur mantenendo all'interno del flusso di documenti (così le specifiche del prodotto conosce il verde il pulsante è lì e non lo sfonda).

ho bisogno solo di estendere se l'altezza spec diventa troppo lunga. In altre parole, se la specifica è in altezza normale, non sarebbe estesa. Mi piacerebbe evitare a weird gap between the spec and the green button.

C'è qualche idea su come farlo?

Ecco un violino per vedere come ho fatto:http://jsfiddle.net/xaliber/xrb5U/

Answer 1

Aggiunta position:absolute prende fuori del flusso di documenti, non c'è modo di tenerlo in esso. Tuttavia, è possibile aggiungere padding-bottom equivalente all'altezza del pulsante al contenitore article, che impedirà al testo lungo di superare il pulsante.

.list-product-pat article { 
    position: relative; 
    min-height: 260px; 
    padding-bottom:80px; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 

http://jsfiddle.net/xrb5U/3/

Diversa è la questione che due contenitori con diverse quantità di testi saranno diverse dimensioni (se uno è maggiore della altezza min-set). Non c'è una soluzione semplice per questo nel posizionamento CSS, è necessario ricorrere a Javascript, Flexbox o display:table-cell per mantenere l'altezza di tutti loro uguali ma ognuno di loro ha i propri problemi.