Div'leri Aşağıdan Yukarı Yığma

Eklenirken divbir karşı s divsabit yüksekliği ile çocuk div'ler üst sınırda yapışmasını, yukarıdan aşağıya doğru görünür.

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

Şimdi aşağıdan yukarıya bu şekilde (alt kenarlığa yapışmasını) görüntülemek için çalışıyorum:

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ 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           │▼│
└───────────────────────┴─┘

Ve böylece ... Umarım ne demek istediğimi anlarsın.

Bu basitçe CSS ile yapılabilir vertical-align: bottommi? Yoksa JavaScript ile birlikte bir şeyleri kesmek zorunda mıyım?

Tüm cevaplar sorunuzun kaydırma çubuğu noktasını kaçırıyor . Ve bu zor bir soru. Sadece modern tarayıcılar ve IE 8+ için çalışmak için buna ihtiyacınız varsa, tablo konumlandırmayı vertical-align:bottomve kullanabilirsiniz max-height. Belirli tarayıcı uyumluluğu için MDN'ye bakın .

Demo (dikey hizalama)

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

Bunun dışında bence sadece CSS ile mümkün değil. Elemanları konteynırlarının dibine yapıştırabilirsiniz position:absolute, ancak onları akıştan çıkarır. Sonuç olarak, gerilmez ve kabı kaydırılabilir hale getirmezler.

Demo (konum-mutlak)

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

Buna daha modern bir cevap kullanmak olacaktır flexbox.

Diğer birçok modern özellikte olduğu gibi, eski tarayıcılarda çalışmazlar , bu nedenle IE8-9 döneminden tarayıcılar için destek atmaya hazır değilseniz, başka bir yöntem aramanız gerekecektir.

İşte böyle yapılır:

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

.child {
  /* whatever */
}

Ve tüm ihtiyacınız olan bu. Daha fazla okuma için flexbox, bkz. MDN .

Aşağıda bazı temel stillerle bir örnek verilmiştir: http://codepen.io/Mest/pen/Gnbfk

Bunu arşivlemek için sadece CSS dönüşümünü kullanabiliriz.

Bunun için bir kod oluşturdum. https://codepen.io/king-dev/pen/PoPgXEg

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

Fikir, kökü önce yatay olarak çevirmek ve sonra doğrudan çocuk div'larını tekrar çevirmektir.

NOT: yukarıdaki yöntem div öğelerinin sırasını da tersine çevirir. Sadece alttan başlayacak şekilde yerleştirmek istiyorsanız, aşağıdakileri yapabilirsiniz.

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

Oldskool tutmak ...

Ben de aynı şeyi yapmak istedim #header div boş bir yaratılan bu yüzden div adlandırılan #headspaceve (iç üstündeki yığını yerleştirdi #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 -->

Sonra görünmez div'in yüksekliği için diğerlerini aşağı itmek için bir yüzde kullandım . Bunu doğru yapmak için tarayıcının geliştirici / denetleyici araçlarını kullanmak kolaydır.#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... */
}

bu mesajın aşağıdan yukarıya aktığı sohbet uygulaması gibi bootstarp ile bu işi istiyorum

bir şeyler okuduktan sonra bunu buldum

bir dış div var sınıf .outerDiv ve sonra kullanıcı arabirimi, liste var

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

Bu, kullanımı basittir 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>