ओवरफ्लो-एक्स: छुपा भी ऊर्ध्वाधर सामग्री को छुपाता है

Question

मेरे पास एक डीआईवी माप 400px चौड़ा है, जिसमें दो डीआईवी साइड-बाय-साइड हैं, प्रत्येक 400px की चौड़ाई और 600 पीएक्स की ऊंचाई के साथ। दोनों डीवी की चौड़ाई तय की गई है, हालांकि ऊंचाई अलग-अलग हो सकती है। मैं दूसरी डीवी को छिपाना चाहता हूं और पहली बार दिखाता हूं, डीआईवी के अंदर स्क्रोलिंग के साथ।

मेरा समाधान, मैंने सोचा, ओवरफ्लो-एक्स को छिपाना था। ऐसा लगता है कि वाई ओवरफ्लो भी छिपा हुआ है।

#schools-sub-nav { 
 
} 
 
#schools-container { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    background-color: fuchsia; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
#schools-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: purple; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#boards-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 400px; 
 
}

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div> 
 
<div id="schools-container"> 
 
    <div id="schools-list"> One </div> 
 
    <div id="boards-list"> Two </div> 
 
</div>

मैं #schools-list दिखाई होने की उम्मीद है, लेकिन किसी कारण से #schools-container में overflow-x: hidden गुप्त रखता है:

यहाँ मेरी कोड है।

Answer 1

जिस तरह से आपने दो divs (एक पूर्ण स्थिति के साथ) को ओवरफ्लो नियम रद्द कर दिया है!

आपको स्थिति प्रकार (सामान्य/पूर्ण नहीं) को बदलने की आवश्यकता है और मैं फ्लोट्स का उपयोग करने का सुझाव देता हूं, अंत में, कंटेनर div जिसे आप ओवरफ्लो लागू करना चाहते हैं, उसे एक फिट रखने की आवश्यकता है, जैसे div अंत में clear: both (फ्लोट्स के उपयोग के मामले में) के साथ।

संपादित करें: मैं बस यह कोशिश की और आप ऊपरी सुझाव निम्न और एक बहुत बड़ी चौड़ाई के साथ अंदर एक और आसपास के div जोड़कर दूसरे div छिपाने के लिए और मुख्य कंटेनर div के लिए overflow-xoverflow को बदल सकते हैं।

<div id="schools-container"> 
    <div id="schools-container-inside"> 
    <div id="schools-list"> One </div> 
    <div id="boards-list"> Two </div> 
    </div> 
</div> 

और फिर सीएसएस (मैं मूल का प्रयोग नहीं किया सीएसएस टिप्पणी की है और अंत में नए div class जोड़ा):

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    /*overflow-x: hidden;*/ 
    overflow: hidden; 
} 
#schools-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: purple; 
    /* 
    position: absolute; 
    top: 0; 
    left: 0; 
    */ 
    float: left; 
} 
#boards-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: green; 
    /* 
    position: absolute; 
    top: 0; 
    left: 400px; 
    */ 
    float: left; 
} 
#schools-container-inside { 
    width: 10000px; 
    overflow: hidden; 
} 

यहाँ JsFiddle: http://jsfiddle.net/MbMAc/

इस तरह

Answer 2

मुझे लगता है कि आपको यह

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    overflow-x: hidden; 
    overflow-y:auto; 
    height:600px; 
} 

की आवश्यकता है 0

आपको मुख्य div की ऊंचाई को भी परिभाषित करने की आवश्यकता है।