Используя позицию: абсолютная, удерживая ее внутри документа потока

Question

Это скриншот со страницы в данный момент я строю. Я пытаюсь убедиться, что зеленая кнопка всегда находится на дне контейнера. Вот кусок кода:

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

До сих пор нет никаких проблем ... пока спецификация продукта не будет слишком долго, и это перерывы в зеленую кнопку.

Я хочу, чтобы сохранить зеленую кнопку в самом нижнем положении, но в то же время я также хочу, высота продлить, если спецификации название продукта/продукт становится слишком длинным.

В идеальном мире, это должно быть что-то вроде этого:

Так что моя идея заключается в том, чтобы сохранить абсолютное позиционирование, все еще держа его в потоке документов (так спецификации продукта знает, что зеленый кнопка есть и не пробивает ее).

Мне нужно его только для расширения , если высота спецификации слишком длинная. Другими словами, если спецификация находится на нормальной высоте, она не будет проходить. Я бы хотел избежать a weird gap between the spec and the green button.

Есть ли идеи, как это сделать?

Вот скрипка, чтобы посмотреть, как я это сделал:http://jsfiddle.net/xaliber/xrb5U/

Answer 1

Добавление position:absolute берет его из потока документа, нет никакого способа, чтобы держать его в нем. Но вы можете добавить padding-bottom эквивалент высоты кнопки в контейнер article, что предотвратит длинный текст, перекрывающий кнопку.

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

Отдельный вопрос в том, что два контейнера с разным количеством текстов будут разными размерами (если он больше, чем высота мин-набор). В CSS-позиционировании нет легкого решения, вам нужно прибегнуть к Javascript, Flexbox или display:table-cell, чтобы сохранить высоту всех одинаковых, но у каждого из них есть свои проблемы.