उत्तरदायी लेआउट में तत्व ऊंचाई निर्धारित करना?

Question

आम तौर पर, क्या मार्कअप और सीएसएस एक उत्तरदायी डिजाइन में प्रतिशत-आधारित ऊंचाई के साथ एक तत्व बना देगा? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? दिखाता है कि दो 100% ऊंचाई कॉलम कैसे बनाएं, लेकिन यह ऊंचाई < 100% के लिए टूटता है।

विशेष रूप से, मेरे पास आइटम की एक सूची के साथ एक साइडबार div है, जो छोटा (खाली) या लंबा (overflow: auto) हो सकता है। लेकिन क्योंकि किसी भी मूल तत्व की निश्चित ऊंचाई नहीं है, height: 20%; काम नहीं करता है। एक उत्तरदायी डिजाइन बनाए रखते हुए मैं साइडबार को द्रव की ऊंचाई कैसे दे सकता हूं?

Answer 1

क्या आपने इनलाइन-ब्लॉक संपत्ति को लंबवत-संरेखण के साथ आजमाया है: शीर्ष? मैंने हाल ही में यह आलेख देखा है जो आपकी समस्या से आपकी सहायता कर सकता है। आम तौर पर ऊंचाई सामग्री को फिट करने के लिए आकार बदलती है, इसलिए मुझे पूरा यकीन नहीं है कि आप क्या हासिल करने की कोशिश कर रहे हैं। इस आलेख को देखें ... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

आमतौर पर पैरेंट कंटेनर पर तरल पैडिंग-तल होने से यह समस्या हल हो जाती है।

अधिक जानकारी यहां पाया जा सकता है: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

अद्यतन: js बिन पर http://jsbin.com/obesuk/1/

मार्कअप:

<div class="obj-wrapper"> 
<div class="content">content</div> 
</div> 

सीएसएस:

.obj-wrapper { 
    position:relative; 
    width:50%; 
    padding-bottom:40%; 
    height:0; 
    overflow:hidden; 
    } 
    .content { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:red; 
    }