ठीक है, मेरे पास एक div है जिसे अन्य divs में सामग्री को नियंत्रित करने के लिए विजेट माना जाता है।
इसे ऊपर (जेड-इंडेक्स के रूप में) सब कुछ और व्यूपोर्ट के शीर्ष से एक विशिष्ट दूरी (जैसे, 10em) होना चाहिए। चूंकि पृष्ठ व्यूपोर्ट से अधिक नहीं हो सकता है, यह या तो स्थिति: निश्चित या स्थिति: पूर्ण हो सकता है। अब, मैं चाहता हूं कि यह व्यवहार्य ऊंचाई (सामग्री के आधार पर) हो, लेकिन भी की न्यूनतम ऊंचाई है और व्यूपोर्ट के निचले भाग में 5 एम से अधिक करीब कभी नहीं होना चाहिए।
मैं जो लिखना चाहता हूं वह है:
.myDiv {
position: absolute;
top: 10em;
min-height: 8em;
max-height: 100% - 15em; //which doesn't work
overflow: auto;
}
क्या ऐसा कुछ केवल सीएसएस का उपयोग करके संभव है?
5 जवाब
हालांकि देर हो चुकी है, लेकिन इसे खोजने वाले अन्य लोगों की मदद करने के लिए, आप css3 के calc() फ़ंक्शन का उपयोग कर सकते हैं। इसे नीचे की तरह इस्तेमाल किया जा सकता है -
.myDiv {
position: absolute;
top: 10em;
min-height: 8em;
max-height: calc(100% - 15em);
overflow: auto;
}
यह फ़ंक्शन पुराने ब्राउज़रों पर समर्थित नहीं है और हमारे पास इसके अंदर निम्न में से कोई भी गणितीय ऑपरेटर हो सकता है - + - * /
अकेले सीएसएस का उपयोग करना स्पष्ट रूप से संभव नहीं है। मैं अब जावास्क्रिप्ट का उपयोग कर रहा हूँ। यहाँ कोड है:
//within a prototype.js environment
var innerHeight = (typeof window.innerHeight === 'undefined') ? document.documentElement.clientHeight : window.innerHeight;
var emSize = parseFloat($(document.body).getStyle('font-size'));
someElement.style['maxHeight'] = (innerHeight - (14 * emSize)).toString() + 'px';
आप केवल max-height:98%; का उपयोग क्यों नहीं करते?
इस तरह आपके पास हमेशा नीचे कुछ जगह होगी (लेकिन एक निश्चित जगह नहीं)।
मुझे लगता है कि इसे एक निश्चित स्थान रखने का एकमात्र तरीका व्यूपोर्ट ऊंचाई प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करना होगा और तदनुसार अपना विजेट अधिकतम ऊंचाई निर्धारित करना होगा।
मुझे लगता है कि आप इसे जटिल बना रहे हैं। यह कोशिश क्यों न करें। यह केवल शीर्ष पर थोड़ा सा पैडिंग जोड़ता है, या यदि आप चाहें तो आप अपने अन्य divs क्या कर रहे हैं इसके आधार पर मार्जिन-टॉप का उपयोग कर सकते हैं।
.myDiv {
postion: absolut;
padding-top: 10em;
min-height: 100px;
max-height: 98%;
overflow: auto;
टिम,
सबसे पहले, मुझे यकीन नहीं है कि आप उनका उपयोग क्यों कर रहे हैं, लेकिन जो कुछ भी आपके लिए काम करता है मुझे लगता है।
आप वहां बहुत ज्यादा हैं, यहां वह कोड है जो मैं चाहता था कि आप जो चाहते थे, केवल एक चीज यह है कि व्यूपोर्ट के बीटीएम से एक निश्चित दूरी के बजाय, मैंने% का उपयोग किया। मुझे लगता है कि यह वैसे ही व्यवहार करता है जिस तरह से आप खोज रहे हैं।
`.myDiv {
position:absolute;
color:#fff;
background:#000;
top:20px;
width:150px;
min-height: 100px;
max-height: 90%;
overflow:auto;
}`
`<div class="myDiv">
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
</div>`
मुझे आशा है कि आप यही खोज रहे हैं!