स्क्रॉल करने योग्य पैराग्राफ में इसके माता-पिता - सीएसएस, सीएसएस 3, फ्लेक्सबॉक्स तक सीमित ऊंचाई है

मैं बनाना चाहता हूँ P ऊंचाई से अधिक टेक्स्ट लेने में सक्षम होने के लिए, बस पाठ को पढ़ने के लिए नीचे स्क्रॉल किया जा सकता है। DIV CLASS="others" मेरी इच्छित ऊंचाई है। (500px)

समस्या यह है कि, जब मैं इसका उपयोग करता हूं overflow: scroll कार्य पृष्ठ के निचले भाग तक जाता है।

संपादित करें: उल्लेख करना भूल गया कि मैं शीर्षक "समाचार" और "उत्पाद" स्क्रॉल बार के बिना होना चाहता हूं।

धन्यवाद।

.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}

.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}

.others #news {
background-color: black;
color: white;
text-align: center;
}

.others #products {
background-color: black;
color: white;
text-align: center;
}

.others a {
color: white;
text-decoration: none !important;
}

.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}

.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<A HREF="#"><H3 ID="newsfeed">News</H3></A>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<A HREF="#"><H3 ID="productsfeed">Products</H3></A>
<P>Cool photos here.</P>
</DIV>
</DIV>

उत्तर:

जवाब के लिए 2 № 1

जैसा कि मैंने उल्लेख किया है मेरी टिप्पणी, मुद्दा आंतरिक अनुच्छेदों को एक स्पष्ट ऊंचाई निर्दिष्ट करके होता है।

इसके अलावा, आंतरिक अनुच्छेदों का सम्मान करने के लिए height उनके माता-पिता का (#news तथा #products फ्लेक्स आइटम जो उनके फ्लेक्स कंटेनर की एक ही ऊंचाई है, .other) आप बदल सकते हैं display माता-पिता का प्रकार flex साथ ही साथ सेट करें flex-direction सेवा मेरे column

और फिर दे दो flex: 1; अनुच्छेदों के अनुसार निम्नानुसार है:

यहां उदाहरण

#news, #products {
display: flex;
flex-direction: column;
}

#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}

के तौर पर पक्षीय लेख: सुनिश्चित करें कि आपने ब्राउज़र समर्थन के लिए फ्लेक्सबॉक्स के पुराने (प्रीफिक्स्ड) वाक्यविन्यास को भी शामिल किया है। आप जैसे टूल का उपयोग कर सकते हैं Autoprefixer इसे प्राप्त करने के लिए।


उत्तर № 2 के लिए 1

आपको एक युक्त की जरूरत है div पैराग्राफ पर, फिर सेट करें overflow: scroll; तथा height: 460px; उस कंटेनर पर (या जो भी ऊंचाई आपको 500px लंबा के भीतर रखना है .others ब्लॉक)।

आपको "यह सुनिश्चित करने की भी आवश्यकता है .others div स्टाइल उस कंटेनर पर लागू नहीं होता है - नीचे दिए गए मेरे उदाहरण में, मैंने उस चयनकर्ता को बदल दिया .others > div केवल तत्काल बच्चों का चयन करने के लिए .others। और आपको हटा देना चाहिए height: 800px; हर्षम कोलामी द्वारा वर्णित आंतरिक अनुच्छेदों से।

jsfiddle उदाहरण


संबंधित सवाल
सबसे लोकप्रिय