CSS Div streç 100% sayfa yüksekliği

SORU

3 NİSAN 2009, Cuma

CSS Div streç 100% sayfa yüksekliği

Benim sayfanın sol gezinti çubuğunda bir yan var ve sayfa yüksekliği 0 germek istiyorum. Sadece görüş yüksekliği, ama alanlara kaydırma kadar gizli de dahil olmak üzere. Javascript bunu yapmak için kullanmak istemiyorum.

HTML/CSS yapılabilir mi?

CEVAP

17 Mayıs 2012, PERŞEMBE

İşte sonunda dinamik bir arka plan için bir kapsayıcı olarak bir div kullanarak bulduğu çözüm.

Olmayan arka plan için z-index kullanır çıkarın.
Tam yükseklikte bir sütun için left right çıkarın.
Tam genişliği satır top bottom çıkarın.

EDİT 1:CSS aşağıya doğru FF ve Chrome göstermediği düzenlendi. position:relative HTML ve min-height:100% yerine height:100% vücudun ayarlamak için taşındı.

EDİT 2:CSS için ekstra yorum. İlave talimatlar biraz daha yukarıda.

CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

Html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

Neden?

html{min-height:100%;position:relative;}

Bu olmadan bulut-kapsayıcı DİV HTML düzeni bağlam kaldırılır. position: relative DİV bottom:0 HTML kutusunun altına başvurduğu çizilir HTML kutunun içinde kalmasını sağlar. Ayrıca şimdi HTML etiketinin yüksekliğini gösterir ve bulut-konteyner görünüm penceresi height:100% kullanabilirsiniz.