CSS - intestazione - sempre in basso a piè di pagina e il 100% di contenuto

<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>

e CSS:CSS - intestazione - sempre in basso a piè di pagina e il 100% di contenuto

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; 
}

Il problema:

Come posso fare questo: top HEADER 16px, contenuti dinamici altezza 100% , PIEDE a fine pagina

Se conferisco il 100% all'involucro interno DIV, dopo il piè di pagina è lo spazio bianco.

Thx

fonte

2011-02-03 David Horák

Penso che una parte della soluzione è quella di aggiungere 'body {height: 100 %;} 'anche. – Kyle

Grazie @Pekka. Era illeggibile. – Shikiryu

Scusa, aggiungo la parte CSS con il corpo, il corpo {altezza: 100%; }, ma questo non ha alcun effetto. –

Hai troppe altezze succedendo:

rimuovere i valori min-height e max-height dai vostri selettori.

Rimuovere position: absolute; dal tuo #wrap div.

Ho fatto un esempio for you here.

fonte

2011-02-03 11:48:49 Kyle

Sembra non funzionare quando il contenuto diventa più grande ... http://jsfiddle.net/KeesCBakker/5fryQ/8/ –

Modifica la posizione del piè di pagina in relativo: http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/10/anche modificato per rimuovere le regole inutili. – Kyle

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/11/ un altro esempio con jQuery aggiunto per mostrare che l'aggiunta di più contenuti in realtà manterrà il footer dove dovrebbe essere :) – Kyle

Per il piè posizionato in basso in una posizione fissa che non si muove quando si scorre la pagina web utilizzare questo:

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

fonte

2012-12-17 11:06:09 Fabio

CSS - intestazione - sempre in basso a piè di pagina e il 100% di contenuto

risposta

Problemi correlati