Bir divanın tam yüksekliği

Question

Bir div'in bir konteynerin tüm yüksekliğini nasıl alabileceğini anlayamıyorum. Aşağıdaki incelemede, "fotoğraf" div'inin tüm yüksekliğini almasını istiyorum, böylece sarı ve yeşil içerikler fotoğrafın sağında.

#header { 
    background-color:#7b88d2; 
    text-align:center; 
    height: 20px; 
} 
#container { 
    max-width:800px; 
    border-style: solid; 
    border-width: 1px; 
} 
#main { 
    width: 100%; 
    height: 100%; 
} 
#photo { 
    float:left; 
    background-color:#FF3366; 
    padding: 10px; 
} 
#logo { 
    float:right; 
    background-color:#FF3366; 
    padding-right: 10px; 
    height: 100%; 
} 
#footer { 
    background-color:#669933; 
    text-align:center; 
    height: 20px; 
} 
#col1 { 
    float: left; 
    padding-left: 10px; 
} 
#col2 { 
    margin-left:auto; 
    margin: 0 auto; 
} 
#txt_container { 
    padding-left: 10px; 
    background-color:#ffffcc; 
} 
#col3 { 
    display: inline; 
    float: right; 
    padding-right: 10px; 
} 

Ben piksel olarak yüksekliği beyan olamaz çünkü bilinmeyen fotoğrafın yüksekliği: İşte kodudur. Burada

Demosu: Yardımlarınız için https://jsfiddle.net/wsfnqvyn/

teşekkürler.

Answer 1

Anlamsız gibi görünüyor. Bir resim, div'unuzdan daha küçük veya daha yüksek olabilir (açıklamaya çalıştığınız şeyle alakalı olup olmadığını bilmiyorum). Bunun yerine css arka plan yöntemini kullanmayı deneyin.

örn. .photo sınıfının özelliklerini tanımlayın ve ardından aşağıdaki kodu html'ye ekleyin.

<div class="photo" style="background-image: url(image.jpg)"></div> 

Bu durumda, .photo sınıfınız en az bir satır içermelidir.

.photo { 
background-size: cover; 
} 

Bu yöntemin, nadir durumlarda bazı CSS etkileşimlerini kısıtlayabileceğini unutmayın.

Answer 2

Ben senin jsfiddle güncelleme: güncellenmiş bir bakınız: https://jsfiddle.net/wsfnqvyn/6/

Ben ekranı kullanın: masa ve masa hücreli bunu başarmak için.

#header { 
    background-color:#7b88d2; 
    text-align:center; 
    height: 20px; 
} 
#container { 
    max-width:800px; 
    border-style: solid; 
    border-width: 1px; 
} 
#main { 
    width: 100%; 
    height: 100%; 
    display:table 
} 
#photo { 
    display:table-cell; 
    background-color:#FF3366; 
    padding: 10px; 
} 
#logo { 
    display:table-cell; 
    background-color:#FF3366; 
    padding-right: 10px; 

} 
#footer { 
    background-color:#669933; 
    text-align:center; 
    height: 20px; 
} 
#col1 { 
    float: left; 
    padding-left: 10px; 

} 
#col2 { 
    margin-left:auto; 
    margin: 0 auto; 
} 
#txt_container { 
    display:table-cell; 
    padding-left: 10px; 
    background-color:#ffffcc; 
} 
#col3 { 
    display: inline; 
    float: right; 
    padding-right: 10px; 
}