İstif Alttan üste Divs
sabit bir yükseklik ile div
div
s ekleme, alt divs üstten alta, üst sınırda yapışmasını görünür.
┌─────────────────────────┐
│ Child Div 1 │
│ Child Div 2 │
│ │
│ │
│ │
└─────────────────────────┘
Şimdi böyle üst (alt sınır yapışmasını) aşağıdan 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 diğerleri... ne demek istediğimi anlamışsınızdır umarım.
Bu sadece css ile yapılabilir (dikey-align: alt?) ya da birlikte bir şeyler javascript ile kesmek zorunda mıyım?
Yardımlarınız için çok teşekkür ederim. :)
CEVAP
Tüm cevaplar, Bayankaydırma çubuğuSorunuzun noktası. Ve zor bir şey. Eğer sadece bu modern tarayıcılar ve IE 8 için çalışmak gerekiyorsa tablo konumlandırma, vertical-align:bottom
max-height
kullanabilirsiniz. Özel tarayıcı uyumluluğu MDN bkz.
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, sadece CSS ile bu mümkün değil sanırım. *Elementler 13* ile kabın dibine sopa yapabilirsiniz ama onları akışı çıkarıyor. Sonuç olarak streç ve konteyner kaydırılan olmak yapmayacaklar.
Demo(pozisyon-mutlak)
.wrapper { position:relative; height:200px; }
.content { position:absolute; bottom:0; width:100%; }
Üst üste istifleme DİVs?...
Nasıl iki <div>s üst üste yapmak...
iOS overscroll devre dışı ama kaydırıl...
Nasıl yayılmış veya divs yatay hizalam...
Üst üste 1 div ile CSS daireler...