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

enter image description here

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

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

Пока нет проблем... пока спецификация продукта не станет слишком длинной, и она перейдет в зеленую кнопку.

enter image description here

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

В идеальном мире это должно быть примерно так:

enter image description here

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

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

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

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

Ответы

Ответ 1

position:absolute добавления 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 чтобы сохранить их высоту одинаковыми, но у каждого из них есть свои проблемы.

Ответ 2

Как уже отмечал @mikel, вы не можете сохранить элемент с position: absolute внутри обычного потока документов, но вы можете обойти эту проблему, смоделировав ее.

Рассматривая пример ниже:

img {
  position: absolute;
}
<img src="https://dummyimage.com/300x400/d9ca29/ffffff">
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>