सीएसएस अधिकतम ऊंचाई संपत्ति

Question

क्या एक डीआईवी की अधिकतम ऊंचाई वाली संपत्ति सेट करने के लिए एक अच्छा क्रॉस-ब्राउज़र तरीका है और जब वह डीआईवी अधिकतम ऊंचाई से परे हो जाता है, तो यह स्क्रॉल बार के साथ एक ओवरफ्लो में बदल जाता है?

Answer 1

क्या आपके ऊंचाई और ओवरफ़्लो के रूप में ऊंचाई सेट के साथ एक रैपर div हो सकता है: स्क्रॉलिंग। फिर आंतरिक div में कोई ऊंचाई सेट नहीं होता है और जैसे ही यह बढ़ता है, तो यह पहले div के scrollbars का उपयोग करेगा?

Answer 2

दुर्भाग्य से IE6 ताकि आप IE6 के लिए एक अभिव्यक्ति का उपयोग करने की जरूरत नहीं है, तो सभी अन्य ब्राउज़र के लिए अधिकतम-ऊंचाई सेट:

div{ 
     _height: expression(this.scrollHeight > 332 ? "333px" : "auto"); /* sets max-height for IE6 */ 
     max-height: 333px; /* sets max-height value for all standards-compliant browsers */ 
     overflow:scroll; 
} 

ओवरफ्लो: ऑटो किसी भी राशि के लिए ज्यादातर मामलों में सबसे अधिक संभावना काम अतिरिक्त स्पिल खत्म हो गया।

Answer 3

मुझे 2005 में किए गए एक पोस्ट से यह समाधान मिला (Min-Height Fast hack)। यह एक हैक है, लेकिन यह सरल और शुद्ध सीएसएस है:

selector { 
    max-height:500px; 
    height:auto !important; 
    height:500px; 
} 

उदाहरण अधिकतम-ऊंचाई के लिए है, लेकिन यह न्यूनतम-ऊंचाई, न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई के लिए काम करता है। :)

* नोट: आपको पूर्ण मूल्यों का उपयोग करना चाहिए, प्रतिशत काम नहीं करते हैं।

अब आपको "ओवरफ्लो: स्क्रॉल" की आवश्यकता है; स्क्रॉल बार

Answer 4

selector 
{ 
    max-height:900px; 
    _height:expression(this.scrollHeight>899?"900px":"auto"); 
    overflow:auto; 
    overflow-x:hidden; 
} 

Answer 5

के साथ इस काम करने के लिए मैं http://www.tutorialspoint.com/css/css_scrollbars.htm से पाया जाता है और थोड़ा संशोधित। यह दोनों IE9 और FF19 के लिए काम लगता है

<style type="text/css"> 
.scroll{ 
    display:block; 
    border: 1px solid red; 
    padding:5px; 
    margin-top:5px; 
    width:300px; 

    max-height:100px; 
    overflow:scroll; 
} 
.auto{ 
    display:block; 
    border: 1px solid red; 
    padding:5px; 
    margin-top:5px; 
    width:300px; 
    height: 100px !important; 
    max-height:110px; 
    overflow:hidden; 
    overflow-y:auto; 
} 
</style> 
<p>Example of scroll value:</p> 

<div class="scroll"> 
    I am going to keep lot of content here just to show 
    you how scrollbars works if there is an overflow in 
    an element box. This provides your horizontal as well 
    as vertical scrollbars.<br/> 
    I am going to keep lot of content here just to show 
    you how scrollbars works if there is an overflow in 
    an element box. This provides your horizontal as well 
    as vertical scrollbars.<br/> 
    I am going to keep lot of content here just to show 
    you how scrollbars works if there is an overflow in 
    an element box. This provides your horizontal as well 
    as vertical scrollbars.<br/> 
    I am going to keep lot of content here just to show 
    you how scrollbars works if there is an overflow in 
    an element box. This provides your horizontal as well 
    as vertical scrollbars.<br/>   
    </div> 

<br /> 
<p>Example of auto value:</p> 

<div class="auto"> 
    I am going to keep lot of content here just to show 
    you how scrollbars works if there is an overflow in 
    an element box. This provides your horizontal as well 
    as vertical scrollbars.<br/> 
    </div> 

Answer 6

मेजर हैक (RedWolves शैली):

.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;} 
.divInner{border:1px solid navy;background-color:white;} 

मैं अधिकतम ऊंचाई से प्यार नहीं हो रही थी विशेषता तो मैं इस alreadyand इन 2 के साथ सफल रहा था कक्षाएं। लेकिन यह बदसूरत है इसलिए इस प्रश्न को बेहतर हिट करने के लिए खोज में। divMax position:absolute दिखाता है कि शो के नीचे सामग्री देता है लेकिन divInner की 200px की अंतिम ऊंचाई को नियंत्रित करता है।