使用position:absolute,同时将其保留在文档流中

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

到目前为止没有问题......直到产品规格变得太长并且它突破了绿色按钮.

我想将绿色按钮保持在最底部位置,但同时如果产品标题/产品规格太长,我也希望高度延长.

在理想的世界中,它应该是这样的:

所以我的想法是保持绝对定位,同时仍然保持在文档流程中(因此产品规格知道绿色按钮在那里并且没有突破它).

如果规格高度太长,我只需要扩展它.换句话说,如果规格处于正常高度,则不会延伸.我想避免规格和绿色按钮之间的奇怪差距.

有什么想法怎么做？

这是一个小提琴,看看我是如何做到的: 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保持它们的高度相同,但每个都有自己的问题.