SORU
19 HAZİRAN 2011, Pazar


İstif Alttan üste Divs

sabit bir yükseklik ile divdiv 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
19 HAZİRAN 2011, Pazar


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%; }

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Abe Olandres

    Abe Olandres

    16 EYLÜL 2006
  • Professor Messer

    Professor Me

    27 NİSAN 2007
  • Semantic Mastery

    Semantic Mas

    30 EKİM 2013