मैं फुल-ऊंचाई ऐप में फ्लेक्सबॉक्स और वर्टिकल स्क्रॉल को कैसे जोड़ सकता हूं?

Question

मैं फ्लेक्सबॉक्स का उपयोग करके एक पूर्ण-ऊंचाई ऐप का उपयोग करना चाहता हूं। मैंने पाया कि मैं display: box;इस लिंक में पुराने फ्लेक्सबॉक्स लेआउट मॉड्यूल ( और अन्य चीजों) का उपयोग करना चाहता हूं : CSS3 फ्लेक्सबॉक्स पूर्ण ऊंचाई ऐप और अतिप्रवाह

यह ब्राउज़र के लिए एक सही समाधान है जो केवल फ्लेक्सबॉक्स सीएसएस गुणों के पुराने संस्करण का समर्थन करता है।

अगर मैं नए फ्लेक्सबॉक्स गुणों का उपयोग करने की कोशिश करना चाहता हूं, तो मैं एक हैक के रूप में सूचीबद्ध उसी लिंक में दूसरे समाधान का उपयोग करने की कोशिश करूंगा: एक कंटेनर का उपयोग करके height: 0px;। यह एक ऊर्ध्वाधर स्क्रॉल दिखाने के लिए बनाता है।

मुझे यह बहुत पसंद नहीं है क्योंकि यह अन्य समस्याओं का परिचय देता है और यह एक समाधान की तुलना में अधिक समाधान है।

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

मैंने एक JSFiddle के साथ-साथ एक आधार उदाहरण के साथ तैयार किया है: http://jsfiddle.net/ch7n6/

यह एक पूर्ण-ऊंचाई वाली HTML वेबसाइट है और सामग्री तत्व के फ्लेक्सबॉक्स गुणों के कारण पाद नीचे की ओर है। मेरा सुझाव है कि आप सीएसएस कोड के बीच बार को स्थानांतरित करें और परिणाम अलग-अलग ऊंचाई का अनुकरण करें।

Comments

यह वह व्यवहार नहीं है जिसे आप खोज रहे हैं? jsfiddle.net/ch7n6/2

— cimmanon

jsfiddle.net/ch7n6/3 हाँ! यह है। : D लेकिन मुझे समझ नहीं आ रहा है कि मुझे प्रभाव प्राप्त करने के लिए ऊँचाई का संकेत देने की आवश्यकता क्यों है। वैसे भी सेटिंग: ऊंचाई: 1 पीएक्स; काम करता है

— जोस काबो

अब मैंने ऊंचाई को घटाकर न्यूनतम ऊंचाई पर बदल दिया। काफी बेहतर। धन्यवाद।

— जोस काबो

@ JoséCabo +1 - अच्छी चाल ऊंचाई: ऊर्ध्वाधर स्क्रॉल दिखाने के लिए 0! क्या आप बता सकते हैं कि यह क्यों काम करता है?

— डैनियल

आपको flex-shrink:0शीर्ष लेख और पाद लेख दोनों पर लागू होना चाहिए ।

— सोरिकिडो

Answer 1

Https://stackoverflow.com/users/1652962/cimmanon का धन्यवाद जिसने मुझे इसका जवाब दिया।

समाधान ऊर्ध्वाधर स्क्रॉल करने योग्य तत्व के लिए एक ऊंचाई निर्धारित कर रहा है। उदाहरण के लिए:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

तत्व की ऊंचाई होगी क्योंकि फ्लेक्सबॉक्स इसे तब तक पुनर्गणित करता है जब तक कि आप एक न्यूनतम ऊंचाई नहीं चाहते हैं ताकि आप इसका उपयोग कर सकें height: 100px;कि यह बिल्कुल उसी तरह है:min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

तो सबसे अच्छा समाधान अगर आप min-heightऊर्ध्वाधर स्क्रॉल में चाहते हैं :

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

यदि आप केवल पूर्ण ऊर्ध्वाधर स्क्रॉल चाहते हैं, तो लेख को देखने के लिए पर्याप्त जगह नहीं है:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

अंतिम कोड: http://jsfiddle.net/ch7n6/867/

Comments

min-heightChrome में उपयोग करना काम नहीं करता है, यह किसी भी तरह पाद लेख के आकार को प्रभावित करता है। heightहालांकि, का उपयोग करना वांछित परिणाम देता है।

— प्रेत ०

उस हेग को "ऑटो" में रखने की कोशिश करें। मैंने इसका अध्ययन किया है और मुझे लगता है कि यह सही जगह है। इसलिए मिनट-ऊंचाई और ऊंचाई का उपयोग करने के बजाय इसका उपयोग करें।

— जोस काबो

height: 0जब कंटेंट ओवरफ्लो हो रहा हो तो कुछ 2px जंपिंग तय करें जब वह नहीं हो। बहुत अजीब। धन्यवाद away।

— ProblemsOfSumit

@Sumit, क्या आप एक तस्वीर प्रदान कर सकते हैं कि आप किस समस्या का सामना कर रहे हैं?

— जोस काबो

मैंने फ़िडल लिंक खोला और क्रोम (फ़ायरफ़ॉक्स में काम करता है) पर अब काम नहीं कर रहा है। स्क्रॉल बार गायब हो गया। क्या किसी को इस बात का अंदाजा है कि इस काम को दोबारा कैसे किया जाए?

— बेट

Answer 2

फ्लेक्सबॉक्स कल्पना संपादक यहाँ।

यह फ्लेक्सबॉक्स का एक प्रोत्साहित उपयोग है, लेकिन कुछ चीजें हैं जो आपको सबसे अच्छे व्यवहार के लिए ट्वीक करनी चाहिए।

• उपसर्गों का उपयोग न करें। अधिकांश ब्राउज़र में अनफिक्सटेड फ्लेक्सबॉक्स अच्छी तरह से समर्थित है। हमेशा उपसर्ग से शुरू करें, और यदि आवश्यक हो तो केवल उपसर्ग जोड़ें।

• चूँकि आपके शीर्ष लेख और पाद लेख फ्लेक्स के लिए नहीं हैं, इसलिए उन्हें दोनों को flex: none;सेट करना चाहिए । अभी आपको कुछ अतिव्यापी प्रभावों के कारण समान व्यवहार करना है, लेकिन आपको उस पर भरोसा नहीं करना चाहिए जब तक कि आप गलती से बाद में खुद को भ्रमित नहीं करना चाहते। (डिफ़ॉल्ट है flex:0 1 auto, इसलिए वे अपनी ऑटो ऊंचाई पर शुरू करते हैं और सिकुड़ सकते हैं, लेकिन बढ़ते नहीं हैं, लेकिन वे overflow:visibleडिफ़ॉल्ट रूप से भी होते हैं , जो min-height:autoउन्हें डिफ़ॉल्ट रूप से ट्रिगर करने से रोकता है। यदि आप कभी भी overflowउन पर सेट करते हैं, तो min-height:autoपरिवर्तनों का व्यवहार। (न्यूनतम सामग्री के बजाय शून्य पर स्विच करना) और वे अचानक अतिरिक्त-उच्च <article>तत्व द्वारा स्खलित हो जाएंगे ।)

• आप <article> flexबहुत आसान कर सकते हैं - बस सेट करें flex: 1;और आप जाने के लिए अच्छा होगा। Https://drafts.csswg.org/css-flexbox/#flex-common में सामान्य मूल्यों के साथ रहने की कोशिश करें जब तक कि आपके पास कुछ और अधिक जटिल करने का एक अच्छा कारण नहीं है - वे अधिकांश व्यवहारों को पढ़ने और कवर करने में आसान होते हैं तुम आह्वान करना चाहोगे।

Answer 3

वर्तमान युक्ति इस संबंध में कहती है flex: 1 1 auto:

width/ heightगुण के आधार पर आइटम को आकार देता है, लेकिन उन्हें पूरी तरह से लचीला बनाता है, ताकि वे मुख्य अक्ष के साथ किसी भी खाली स्थान को अवशोषित करें। सभी आइटम की कर रहे हैं flex: auto, flex: initialया flex: none, आइटम आकार दिया है के बाद किसी भी सकारात्मक मुक्त अंतरिक्ष में समान रूप से साथ आइटम को वितरित किया जाएगा flex: auto।

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

यह मुझे ऐसा लगता है जैसे यदि आप कहते हैं कि एक तत्व 100px लंबा है, तो इसे एक "सुझाए गए" आकार की तरह अधिक व्यवहार किया जाता है, पूर्ण नहीं। क्योंकि इसे सिकुड़ने और बढ़ने की अनुमति है, यह अपनी अनुमति के अनुसार अधिक स्थान लेता है। इसीलिए इस लाइन को अपने "मुख्य" तत्व के साथ जोड़कर काम करता है: height: 0(या कोई अन्य स्मालिश नंबर)।