माता-पिता की सापेक्ष ऊंचाई होने पर बाल div पर scrollbars को कैसे बल दें?

Question

जिस समस्या को मैं हल करने की कोशिश कर रहा हूं वह काफी सरल है, फिर भी मुझे अपनी सीएसएस तकनीकों का उपयोग करने के लिए जो कुछ चाहिए, उसे हासिल करना मुश्किल लगता है।

मैं चाहता हूं कि कुछ प्रकार के माता-पिता div को सापेक्ष मूल्य (जैसे: 100% या 30%) पर सेट करें। कृपया मत पूछें कि मुझे इसकी आवश्यकता क्यों है, क्योंकि यह केवल आंशिक है और पूरे लेआउट को समझाते हुए इस सवाल से परे है।

इस अभिभावक के अंदर, मुझे h1 के बाद हेडर div में बहुत सारे टेक्स्ट होने की आवश्यकता है। और सबसे महत्वपूर्ण, मुझे केवल बाल div के अंदर स्क्रॉलबार होना चाहिए, ताकि हेडर हमेशा कंटेनर के शीर्ष से जुड़ा रहे रहें।

मार्कअप:

<div class="wrapper"> 
    <h1>Test</h1> 
    <div class="text"> 
     Lorem ipsum (... lots of text) 
    </div> 
</div> 

(नहीं) कार्य बेला: http://jsfiddle.net/CodeConstructors/BEVSS/

Answer 1

है this कुछ हासिल करना चाहते हैं?

एचटीएमएल

<div class="wrapper"> 
    <div class="header"> 
      HEADER 
    </div> 
    <div class="content"> 
      Lorem ipsum (... lots of text) 
    </div> 
</div> 

सीएसएस

html, body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
.wrapper { 
    width: 400px; 
    height: 100%; 
    background-color: #fec; 
    margin: auto; 
    position: relative; 
} 
.header { 
    height: 40px; 
    background-color: green; 
    color: #fff; 
} 
.content { 
    position:absolute; 
    bottom:0px; 
    top: 40px; 
    width:100%; 
    overflow: auto; 
    background-color: #333; 
    color: #666; 
} 

Answer 2

आप CSS3 के गुण calc (उपयोग कर सकते हैं), इस तरह:

html, body { height: 100% } 
.wrapper { 
    height: 30%; 
    overflow: hidden; 
    width: 400px; 
    background-color: yellow; 
} 
h1 {height: 20px} 
.text { 
    overflow: auto; 
    height:-webkit-calc(100% - 20px); 
    height: -moz-cale(100% - 20px); 
    height: -ms-cale(100% - 20px); 
    height: -o-cale(100% - 20px); 
    height: cale(100% - 20px); 
} 

आप शीर्षक की ऊंचाई को परिभाषित की जरूरत है। DEMO यदि आप उपयोग की calc() विधि जानना चाहते हैं, तो आप here पर क्लिक कर सकते हैं।