स्थिति का उपयोग करना: जबकि यह दस्तावेज़ अंदर रखने प्रवाह

Question

यह एक पेज से एक स्क्रीनशॉट वर्तमान में मैं निर्माण कर रहा हूँ है निरपेक्ष। मैं यह सुनिश्चित करने की कोशिश कर रहा हूं कि हरे रंग का बटन हमेशा कंटेनर के नीचे होता है। यहाँ कोड का एक टुकड़ा है:

एचटीएमएल

<div class="list-product-pat"> 
    <article> 

    <!-- title, image, spec ... --> 

    <div class="pricing-pat"> 

    <!-- the button goes here --> 

    </div> 
    </article> 
</div> 

सीएसएस

.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 यह दस्तावेज़ प्रवाह से बाहर ले जाता है, वहाँ यह में रखने के लिए कोई रास्ता नहीं है। लेकिन आप को 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/

एक अलग मुद्दा यह है कि ग्रंथों के विभिन्न राशि के साथ दो कंटेनरों अलग आकार होगा (अगर एक मिनट-ऊंचाई सेट से बड़ा है) है। सीएसएस पोजीशनिंग में इसके लिए कोई आसान फिक्स नहीं है, आपको उन सभी की ऊंचाई बनाए रखने के लिए जावास्क्रिप्ट, फ्लेक्सबॉक्स या display:table-cell का सहारा लेना होगा, लेकिन उनमें से प्रत्येक के पास भी अपने स्वयं के मुद्दे हैं।