CSS - başlık - hep alt altbilgi ve% 100 içeriği

<body> 
    <div id="wrap"> 
     <div id="header"> 
      HEADER 
     </div> 
     <div id="inner-wrap"> 
      <div id="content"> 
       CONTENT 
      </div> 
     </div> 
     <div id="footer"> 
      FOTTER 
     </div> 
    </div> </body>

VE CSS:CSS - başlık - hep alt altbilgi ve% 100 içeriği

html { height:100%; max-height:100%; } 

body { 
    margin:0; 
    padding:0; 
    height:100%; 
    max-height: 100%; 
} 

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

#inner-wrap { 
    padding-bottom:50px; 
    min-height: 100%; 
} 
#inner-wrap:after { 
    content:" "; 
    display:block; 
    clear:both; 

} 
* html #inner-wrap { 
    height:100%; 
} 

#header 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 16px; 
    color: White; 
    text-align: center; 
    position: relative; 
    top:0px; 
} 
#footer 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 50px; 
    position:absolute; 
    bottom: 0; 
    color: White; 
    text-align: center; 
} 
#content 
{ 
    width: 1000px; 
    height: 100%; 
    background-color: #F5FDEC; 
    margin: 0 auto 0 auto; 
}

Sorun: İÇERİK dinamik% 100 yüksekliği, 16px ÜSTBİLGİ top:

ben bu hale nasıl , FOOTER sayfa sonunda

İç ambalajlı DIV'ye% 100 verirseniz, altbilgi beyaz boşluk olduktan sonra.

Thx

kaynak

2011-02-03 David Horák

Ben çözümün bir parçası 'vücut {yüksekliği eklemek olduğunu düşünüyorum: Eğer web sayfası Bunu kullanmak kaydırırken hareket etmeyen bir sabit konumda alt kısmında konumlandırılmış altbilgi için – Kyle

Teşekkürler @Pekka. Okunmuyordu. – Shikiryu

Üzgünüz, CSS parçasını gövde ile ekleyeceğim, gövde {yükseklik:% 100; } Fakat bunun bir etkisi yok. içerik aldığında –

Çok fazla yükseklikler oluyor var:

senin seçicilerinden min-height ve max-height değerleri kaldırın.

position: absolute; #wrap div adresinden.

Örnek bir for you here yaptım.

#footer{ 
position:fixed; 
clear:both; 
}

kaynak

2011-02-03 11:48:49 Kyle

çalışmak görünmüyor büyük ... http://jsfiddle.net/KeesCBakker/5fryQ/8/ göreli için altbilgi konumunu değiştirme –

: http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/10/Ayrıca gereksiz kuralları kaldırmak için düzenlenmiştir. – Kyle

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/11/ jQuery ekledikçe başka bir örnek daha fazla içeriğin eklenmesinin aslında altbilgiyi nerede olması gerektiğini gösterir :) – Kyle

100 %;} `de.

kaynak

2012-12-17 11:06:09 Fabio

CSS - başlık - hep alt altbilgi ve% 100 içeriği

cevap

İlgili konular