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

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/

4b9b3361

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

4
ответ дан 03 сент. '13 в 20:25
источник