নীচে থেকে শীর্ষে ডিভস স্ট্যাক করে

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

— ধারকটির

@ এনিমাস - এটি অক্ষম স্ক্রোলবারটি প্রদর্শন করবে কারণ ধারকটির উচ্চতা কোনও position:absoluteশিশু দ্বারা প্রভাবিত হয় না ।

— gblazex

ভাল আপনার সমাধানটি কোনও স্ক্রোলবার প্রদর্শন করে না, যা প্রশ্নের অংশ

— ভিনিমাস

আমি উত্তর আপডেট করেছি। আপনি আধুনিক ব্রাউজারগুলিতে (আই 7+) স্ক্রোলবার ইস্যুতে কাজ করতে পারেন।

— gblazex

আপনার উত্তরের জন্য ধন্যবাদ, মোড়ক কাজটি ভাল করে দেয়।

— জুলফ

Answer 2

এর আরও আধুনিক উত্তরটি ব্যবহার করা হবে flexbox।

অন্যান্য অনেক আধুনিক বৈশিষ্ট্যের মতো এগুলিও লিগ্যাসি ব্রাউজারগুলিতে কাজ করবে না , সুতরাং আপনি যদি IE8-9 যুগের ব্রাউজারগুলির জন্য সমর্থন খাঁজতে প্রস্তুত না হন তবে আপনাকে অন্য একটি পদ্ধতি সন্ধান করতে হবে।

এটি কিভাবে সম্পন্ন হয়েছে তা এখানে:

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

.child {
  /* whatever */
}

এবং এটিই আপনার প্রয়োজন। আরও পড়ার জন্য flexbox, MDN দেখুন ।

কিছু বেসিক স্টাইলিং সহ এটির উদাহরণ এখানে: http://codepen.io/Mest/pen/Gnbfk

Comments

দুর্দান্ত উত্তর, আপনাকে অনেক ধন্যবাদ! ফ্লেক্সবক্সগুলি এখনও শুনেনি, সত্যিই আকর্ষণীয় মনে হচ্ছে!

— Wulf

এটি অর্ডারটিকে বিপরীত করে তবে তাদের পিতামাতার নীচে টানবে না।

— এডওয়ার্ড অ্যান্ডারসন

@ নিলবাস আপনি কি বিস্তারিত বর্ণনা করবেন? আমার পূর্ববর্তী পরীক্ষাগুলি এমনকি সংযুক্ত উদাহরণটি অবশ্যই পিতামালকের নীচে নীচে টানতে পারে বলে মনে হয়।

— নীল ক্যাস্পারসন

মনে হচ্ছে আমার ভুল হয়েছে। সম্ভবত একটি বিবাদী শৈলী আছে যা এটি আমার জন্য কাজ করা থেকে বিরত ছিল। ধন্যবাদ!

— এডওয়ার্ড অ্যান্ডারসন

আমি উদাহরণ কোডটিতে পেয়েছি, সেখানে পিতামাতা। অবস্থান: স্থির;; যা এই কাজটি করে। এছাড়াও, ডেমোতে স্ক্রোলিং চোমে কাজ করে না, আপনার এগুলির দরকার: para ওভারফ্লো-ওয়াই: অটো; সর্বনিম্ন উচ্চতা: 0 পিক্স;} এবং স্থিত অবস্থানটি সরিয়ে দিন

— এনজি সেক লং

Answer 3

এটি সংরক্ষণাগারভুক্ত করার জন্য আমরা কেবল সিএসএস রূপান্তর ব্যবহার করতে পারি।

আমি এটির জন্য একটি কোডপেন তৈরি করেছি। https://codepen.io/king-dev/pen/PoPgXEg

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

ধারণাটি হ'ল প্রথমে মূলটিকে অনুভূমিকভাবে ফ্লিপ করুন এবং তারপরে সরাসরি বাচ্চাদের আবার ডিভস ফ্লিপ করুন।

দ্রষ্টব্য: উপরের পদ্ধতিটি ডিভের ক্রমও বিপরীত করে। আপনি যদি এগুলি কেবল নীচ থেকে শুরু করতে চান তবে নীচেরটি করতে পারেন।

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

Answer 4

এটা পুরানো কুল রাখুন ...

আমি একই কাজটি একটি #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

#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 #যেখানে শিশু ডিভগুলি বৃদ্ধি পাচ্ছে এবং যখন একটি নির্দিষ্ট উচ্চতা বাড়ানো হয়, সেখানে স্ক্রোল দেখানো উচিত। সুতরাং এই উত্তরটি প্রকৃত প্রশ্নের সমাধান সরবরাহ করে না।

— সাজিদ আলী

Answer 5

আমি এই কাজটি বুট স্টার্পের সাথে চ্যাটিং অ্যাপের মতো চাই যেখানে বার্তা প্রবাহিত হবে bottom

স্টাফ পড়ার পরে, আমি এটি খুঁজে পেয়েছি

আমার একটি বহিরাগত ডিভ অনুমান ক্লাস .outerDiv এবং তারপরে 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>