กองซ้อนจากด้านล่างขึ้นบน

เมื่อผนวกdivs divกับ a ที่มีความสูงคงที่ 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           │▼│
└───────────────────────┴─┘

และอื่น ๆ ... ฉันหวังว่าคุณจะได้สิ่งที่ฉันหมายถึง

มันสามารถทำได้ด้วย CSS (เช่นvertical-align: bottom)? หรือฉันจะต้องแฮกบางอย่างพร้อมกับ JavaScript?

คำตอบทั้งหมดพลาดจุดเลื่อนของคำถามของคุณ และมันก็เป็นเรื่องที่ยาก หากคุณต้องการเพียงการทำงานสำหรับเบราว์เซอร์ที่ทันสมัยและ IE 8 + คุณสามารถใช้การวางตำแหน่งโต๊ะและvertical-align:bottom max-heightดูMDNสำหรับความเข้ากันได้ของเบราว์เซอร์ที่เฉพาะเจาะจง

การสาธิต (จัดแนวตั้ง)

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

HTML

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

นอกจากนั้นฉันคิดว่ามันเป็นไปไม่ได้กับ CSS เท่านั้น คุณสามารถทำให้องค์ประกอบติดกับด้านล่างของภาชนะด้วยposition:absoluteแต่มันจะพาพวกมันออกไปจากการไหล ดังนั้นพวกเขาจะไม่ยืดและทำให้ภาชนะเลื่อนได้

การสาธิต (ตำแหน่ง - แน่นอน)

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

flexboxคำตอบที่ทันสมัยมากขึ้นนี้จะใช้

เช่นเดียวกับคุณสมบัติที่ทันสมัยอื่น ๆพวกเขาจะไม่ทำงานในเบราว์เซอร์รุ่นเก่าดังนั้นหากคุณพร้อมที่จะรองรับการรองรับเบราว์เซอร์ในยุค IE8-9 คุณจะต้องหาวิธีอื่น

นี่คือวิธีการ:

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

.child {
  /* whatever */
}

และนั่นคือทั้งหมดที่คุณต้องการ เพื่ออ่านเพิ่มเติมเกี่ยวกับการflexboxดูMDN

นี่คือตัวอย่างของสิ่งนี้ด้วยการใส่สไตล์พื้นฐาน: http://codepen.io/Mest/pen/Gnbfk

เราสามารถใช้การแปลง CSS เพื่อเก็บถาวรนี้

ฉันสร้าง codepen ขึ้นมา https://codepen.io/king-dev/pen/PoPgXEg

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

ความคิดคือการพลิกรากแรกในแนวนอนและจากนั้นพลิกเด็ก divs อีกครั้ง

หมายเหตุ: วิธีการข้างต้นยังกลับคำสั่งของ divs หากคุณต้องการให้พวกเขาเริ่มต้นจากด้านล่างคุณสามารถทำสิ่งต่อไปนี้

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

Keepin 'it oldskool ...

ฉันต้องการทำสิ่งเดียวกันใน#header divดังนั้นฉันจึงสร้างdivว่าง ๆเรียก#headspaceและวางมันไว้ที่ด้านบน stack (ด้านใน#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... */
}

ฉันต้องการทำงานกับ bootstarp เช่นการแชทแอพที่มีข้อความไหลขึ้นด้านล่าง

หลังจากอ่านเนื้อหาฉันพบสิ่งนี้

ฉันมี div นอกถือว่าคลาส. outerDiv แล้ว UI รายการ

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

position: absoluteนี้เป็นเรื่องง่ายเมื่อคุณใช้

http://jsfiddle.net/XHeZj/

<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>