Tarayıcılar geniş bir yelpazede arasında 0 minimum yükseklik unsuru yapmak için en iyi yolu nedir ? Eğer yüksekliği sabit üstbilgi ve altbilgi ile bir düzen varsa özellikle orta içerik kısmı Alanı 0 altbilgi altına sabit ile arasında dolgu yapıyor musunuz ?

Aşağıdaki kullanıyorum: CSS Layout - 100 % height

Min-height

#Bu sayfanın kapsayıcı öğe 100% min-yükseklik vardır. Bu eğer içerik, görüş sağlar Daha fazla yükseklik gerektiriyorsa, içerik kuvvetleri yüksekliği ##kap daha iyi olmak için. Mümkün sütunlarda #içerik daha sonra bir arka plan ile görüntülenmiştir olabilir görüntü #kap; divs tablo hücreleri değildir ve gerekmez (veya istiyorum) fysical elemanları gibi görsel bir etki oluşturmak için. Eğer varsa henüz; titrek çizgiler düşünün ve yerine geçişlerini ikna düz çizgiler ve basit renk şemaları.

Göreceli konumlandırma

Her zaman kalacaktır altbilgi konteyner göreli bir konumu vardır, çünkü #, # min-height yukarıdaki engel değildir beri onun altındaki; Ölçekleme gelen kapsayıcı, bu bile çalışır (ya da özellikle zaman değil) ##içerik kuvvetleri #kap uzar.

Doldurma-alt

Artık normal akışında olduğu için, doldurma-alt #içerik şimdi mutlak alanı sağlar #footer. Bu doldurma. altbilgi böylece varsayılan olarak kaydırılan yüksekliği dahil, asla yukarıda içeriği örtüşüyor.

Metin boyutunu biraz ölçek ya da tarayıcınızın penceresi bu test için yeniden boyutlandırmak düzen.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

İşler benim için iyi.