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

  • ASUS

    ASUS

    22 EKİM 2005
  • FailArmy U

    FailArmy U

    29 AĞUSTOS 2009
  • Schmittastic Jr.

    Schmittastic

    19 Mart 2013