Mit position: absolute, während es im Dokument fließen halten

Question

Es ist ein Screenshot von einer Seite zur Zeit baue ich. Ich versuche sicherzustellen, dass der grüne Knopf immer auf dem Boden des Containers ist. Hier ist ein Stück des Codes:

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%; 
} 

Bisher gibt es kein Problem ... bis das Produkt spec zu lang wird und es bricht in den grünen Knopf ein.

Ich möchte die grüne Taste in der die meisten unteren Position zu halten, aber in der gleichen Zeit möchte ich auch die Höhe zu verlängern, wenn das Produkt Titel/Produkt-Spezifikation zu lang wird.

In der idealen Welt, sollte es so etwas wie diese:

Also meine Idee ist, die absolute Positionierung zu halten, während sie noch im Innern des Dokumentenflusses (so dass das Produkt spec kennt die grünen halten Knopf ist da und bricht nicht durch).

Ich brauche es nur zu erweitern wenn die Spezifikation Höhe zu lang wird. Mit anderen Worten, wenn die Spezifikation in normaler Höhe ist, würde sie sich nicht ausdehnen. Ich möchte vermeiden, a weird gap between the spec and the green button.

Gibt es eine Idee, wie es geht?

Hier eine Geige ist zu sehen, wie ich es tat:http://jsfiddle.net/xaliber/xrb5U/

Answer 1

position:absolute nimmt es aus dem Dokumentenfluss Hinzufügen, gibt es keine Möglichkeit, es darin zu halten. Aber Sie können stattdessen padding-bottom entsprechen der Höhe der Schaltfläche zum article Container hinzufügen, was verhindert, dass langer Text die Schaltfläche überläuft.

.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/

eine andere Frage ist, daß zwei Behälter mit unterschiedlicher Menge von Texten unterschiedliche Größe sein werden (wenn man größer als die eingestellte min-Höhe). Es gibt keine einfache Lösung für diese CSS-Positionierung, Sie müssen auf Javascript, Flexbox oder display:table-cell zurückgreifen, um die Höhe von allen gleich zu halten, aber jeder von ihnen hat auch seine eigenen Probleme.