Bir div için dinamik bir yükseklik oluşturma

Question

Ürün bilgileri (resim, başlık, açıklama, fiyat, vb ...) içeren basit bir div'a sahibim. Ben bootstrap kullanıyorum (3.x) Masaüstünde, div için belirli bir yükseklik kullanıyorum, bu yüzden her şey eşittir, 2 sütun halinde görüntülenir. Mobile'da, yalnızca bir sütunum var ve belirli bir piksel yüksekliğini ayarlamak yerine, div yüksekliğini dinamik yapmak için bir yol bulmak istiyorum (açıklamalar değişir ve divun yüksekliğini biraz değiştirebilir). Mümkün mü? Div'ler bir veritabanından dinamik olarak yaratılır ... İşte şimdiki css - görebildiğiniz gibi, yüksekliği şu an piksellerle ayarlıyorum. eğer yardımcı olur

.prodBox2 { 
height: 300px; 
margin-bottom: 10px; 
padding:5px; 
border: 3px solid #666666; 
border-radius:25px; 
font-family: arial; 
font-size: .8em; 
color: rgb(50, 50, 50); 
} 
.prodImage2 { 
float: left; 
margin: 10px; 
width: 125px; 
height: auto; 
} 

İşte codlin link: http://codepen.io/shadowfax007/pen/xVqQNm

Answer 1

Herhangi div yüksekliği varsayılan olarak dinamiktir. Yani tüm yapmanız gereken (768px yukarıdaki ekran genişlikleri de) bir medya sorgusunda yükseklik koşulu sarın geçerli: Bir yan not olarak

@media(min-width: 768px) { 
    .prodBox2 { 
    height: 300px; 
    overflow-y: auto; 
    } 
} 
.prodBox2 { 
    margin-bottom: 10px; 
    padding: 5px; 
    border: 3px solid #666666; 
    border-radius: 25px; 
    font-family: arial; 
    font-size: .8em; 
    color: rgb(50, 50, 50); 
} 
.prodImage2 { 
    float: left; 
    margin: 10px; 
    width: 125px; 
    height: auto; 
} 

, muhtemelen tepki bazı okuma yapmak istiyorum, şu anda bunu yapıyor yanlış. İyi bir yanıt veren tasarımda, yükseklik belirtmeniz gerekmez.