Sử dụng vị trí: tuyệt đối trong khi vẫn giữ nó trong luồng tài liệu

Question

Đây là ảnh chụp màn hình từ một trang hiện tôi đang xây dựng. Tôi đang cố gắng đảm bảo nút màu xanh lá cây luôn ở dưới cùng của vùng chứa. Dưới đây là một phần của mã:

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

Cho đến nay không có vấn đề ... cho đến khi sản phẩm đặc tả trở nên quá dài và nó đột nhập vào nút màu lục.

tôi muốn duy trì vào nút màu xanh lá cây ở vị trí đáy nhất, nhưng trong thời tôi cũng muốn chiều cao để mở rộng nếu tiêu đề sản phẩm/sản phẩm đặc tả trở nên quá dài.

Trong thế giới lý tưởng, nó phải là một cái gì đó như thế này:

Vì vậy, ý tưởng của tôi là để duy trì vị trí tuyệt đối trong khi vẫn giữ nó bên dòng chảy tài liệu (vì vậy sản phẩm gì về việc các màu xanh lá cây là có và không vượt qua nó).

Tôi chỉ cần mở rộng nếu chiều cao đặc tả quá dài. Nói cách khác, nếu spec ở chiều cao bình thường, nó sẽ không phạm vi. Tôi muốn tránh a weird gap between the spec and the green button.

Có ý tưởng nào về cách thực hiện không?

Đây là một fiddle để xem làm thế nào tôi đã làm nó:http://jsfiddle.net/xaliber/xrb5U/

Answer 1

Thêm position:absolute mất nó ra khỏi dòng chảy tài liệu, không có cách nào để giữ nó trong nó. Thay vào đó, bạn có thể thêm padding-bottom tương đương với chiều cao của nút vào hộp chứa article, điều này sẽ ngăn văn bản dài tràn ngập nút.

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

Một vấn đề riêng biệt là hai container với số lượng khác nhau của văn bản sẽ được kích cỡ khác nhau (nếu lớn hơn min-height thiết lập). Không có sửa chữa dễ dàng cho điều này trong CSS định vị, bạn phải nghỉ mát để Javascript, Flexbox hoặc display:table-cell để giữ chiều cao của tất cả chúng giống nhau nhưng mỗi người trong số họ có vấn đề riêng của họ quá.