नीचे से ऊपर तक स्टैकिंग डिव

Question

जब एक निश्चित ऊँचाई के साथ divएस को जोड़ते हैं div, तो बाल विभक्तियाँ ऊपर से नीचे की ओर, शीर्ष सीमा पर चिपके हुए दिखाई देंगी।

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

अब मैं उन्हें नीचे से ऊपर तक इस तरह प्रदर्शित करने की कोशिश कर रहा हूं (नीचे की सीमा से चिपका हुआ):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

और इसी तरह ... मुझे उम्मीद है कि आपको मेरा मतलब मिलेगा।

क्या यह सीएसएस (कुछ जैसा vertical-align: bottom) के साथ सरल है ? या मुझे जावास्क्रिप्ट के साथ कुछ हैक करना है?

Answer 1

सभी उत्तर आपके प्रश्न के स्क्रॉलबार बिंदु को याद करते हैं । और यह एक कठिन है। यदि आपको केवल आधुनिक ब्राउज़र और IE 8+ के लिए काम करने के लिए इसकी आवश्यकता है तो आप टेबल पोजीशनिंग का उपयोग कर सकते हैं, vertical-align:bottomऔर max-height। विशिष्ट ब्राउज़र संगतता के लिए MDN देखें ।

डेमो (ऊर्ध्वाधर-संरेखित)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

एचटीएमएल

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

---

इसके अलावा, मुझे लगता है कि यह केवल सीएसएस के साथ संभव नहीं है। आप तत्वों को उनके कंटेनर के नीचे से चिपका सकते हैं position:absolute, लेकिन यह उन्हें प्रवाह से बाहर ले जाएगा। परिणामस्वरूप वे खिंचाव नहीं करेंगे और कंटेनर को स्क्रॉल करने योग्य बनाएंगे।

डेमो (स्थिति-निरपेक्ष)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Comments

और overflow-y:autoकंटेनर के लिए

— वेनिस

@venimus - यह एक अक्षम स्क्रॉलबार प्रदर्शित करेगा, क्योंकि कंटेनर की ऊंचाई एक position:absoluteबच्चे से प्रभावित नहीं होती है ।

— gblazex

अच्छी तरह से आपका समाधान किसी भी स्क्रॉलबार को प्रदर्शित नहीं करता है, जो कि सवाल का हिस्सा है

— venimus

मैंने जवाब अपडेट कर दिया है। आप आधुनिक ब्राउज़रों में स्क्रॉलबार समस्या के आसपास काम कर सकते हैं (IE 7+)।

— १२:५१ पर gblazex

आपके उत्तर के लिए धन्यवाद, आवरण अच्छा काम करता है।

— Wulf

Answer 2

इसका अधिक आधुनिक उत्तर उपयोग करना होगा flexbox।

कई अन्य आधुनिक विशेषताओं के साथ, वे लीगेसी ब्राउज़र में काम नहीं करेंगे , इसलिए जब तक आप IE8-9 युग के ब्राउज़र के लिए समर्थन को खोदने के लिए तैयार नहीं होते हैं, तब तक आपको दूसरी विधि की तलाश करनी होगी।

यहां बताया गया है कि यह कैसे किया जाता है:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

और बस इतना ही चाहिए। आगे पढ़ने के लिए flexbox, एमडीएन देखें ।

यहाँ कुछ बुनियादी स्टाइल के साथ इसका एक उदाहरण दिया गया है: http://codepen.io/Mest/pen/Gnbfk

Comments

बहुत बढ़िया जवाब, बहुत बहुत धन्यवाद! Flexboxes के बारे में अभी तक नहीं सुना, वास्तव में दिलचस्प लगता है!

— Wulf

यह आदेश को उलट देता है, लेकिन उन्हें माता-पिता के नीचे तक नहीं खींचता है।

— एडवर्ड एंडरसन

@nilbus क्या आप विस्तृत करना चाहते हैं? मेरे पिछले परीक्षण और यहां तक ​​कि संलग्न उदाहरण सबसे निश्चित रूप से मूल तत्व की तह तक खींचते प्रतीत होते हैं।

— Nils Kaspersson

लगता है मैं गलत हूं। शायद एक परस्पर विरोधी शैली है जो इसे मेरे लिए काम करने से रोक रही थी। धन्यवाद!

— एडवर्ड एंडरसन

मैंने उदाहरण कोड में पाया, .parent {स्थिति: निश्चित;} हैं, जो यह काम करता है। इसके अलावा, डेमो में स्क्रॉल चोम पर काम नहीं करता है, आपको इनकी आवश्यकता है: .parant {-webkit- फ्लेक्स: 1 1 ऑटो; ओवरफ्लो-वाई: ऑटो; न्यूनतम ऊंचाई: 0px;} और नियत स्थान को हटा दें

— Ng Sek Long

Answer 3

हम इसे संग्रहीत करने के लिए बस CSS ट्रांसफॉर्मेशन का उपयोग कर सकते हैं।

मैंने इसके लिए एक कोडपेन बनाया। https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

यह विचार है कि रूट को पहले क्षैतिज रूप से फ्लिप किया जाए और फिर फ्लिप डायरेक्ट बच्चों को फिर से विभाजित किया जाए।

नोट: उपरोक्त विधि भी divs के क्रम को उलट देती है। यदि आप बस उन्हें नीचे से शुरू करने के लिए रखना चाहते हैं तो आप निम्न कार्य कर सकते हैं।

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

Answer 4

Keepin 'it oldskool ...

मैं एक #header डिव में एक ही काम करना चाहता था इसलिए मैंने एक खाली डिव को बनाया #headspaceऔर इसे स्टैक के ऊपर रखा (अंदर #header):

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

तब मैंने एक प्रतिशत का उपयोग किया , अदृश्य #headspace div की ऊंचाई के लिए , दूसरों को नीचे धकेलने के लिए। ब्राउज़र के डेवलपर / इंस्पेक्टर टूल का उपयोग करना आसान है ताकि यह सही हो सके।

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}

Comments

यह तभी काम करेगा जब आपके पास निश्चित सामग्री होगी। अगर आपके पास डायनामिक कंटेंट है और आपको नहीं पता कि कौन-कौन से डिवो को रेंडर किया जाएगा, तो यह काम नहीं करेगा।

— साजिद अली

यह सिर्फ एक छोटा सा समाधान था जिसका मैंने इस्तेमाल किया। डायनामिक कंटेंट की आवश्यकता का कोई विशेष उल्लेख नहीं था - क्योंकि मुझे पता है कि पृष्ठ एक बार divजोड़ दिए जाने पर हर बार पूरी तरह से ताज़ा हो जाता है। इसलिए मैं इसे यहाँ रखता हूँ जब कोई वास्तव में अधिक स्थैतिक समाधान चाहता है। दूसरे शब्दों में: मुझे लगता है कि एक शून्य वोट एक नकारात्मक वोट से अधिक उपयुक्त होगा।

— veganaiZe

समय लेने और स्थैतिक सामग्री के साथ उत्तर देने के लिए धन्यवाद। मैं उसका सम्मान करता हूँ। प्रश्न स्पष्ट रूप से गतिशील सामग्री को दर्शाता है, Child Div #जहां बाल divs बढ़ रहे हैं, और जब एक निश्चित ऊंचाई से वृद्धि हुई है, तो स्क्रॉल दिखाया जाना चाहिए। इसलिए यह उत्तर वास्तविक प्रश्न का समाधान प्रदान नहीं करता है।

— साजिद अली

Answer 5

मुझे यह काम चैटस्टार ऐप की तरह करना चाहिए जहाँ संदेश प्रवाह नीचे की ओर होता है

सामान पढ़ने के बाद, मैंने यह पाया

मेरे पास एक बाहरी div ग्रहण वर्ग है। रूटरDiv और फिर UI, सूची

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

Answer 6

यह सरल है जब आप उपयोग करते हैं position: absolute।

http://jsfiddle.net/XHeZj/

Answer 7

<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>