CSS - Altezza 100% meno #px - Intestazione e piè di

Question

La pagina web in questione si presenta così:

// The Header // 
/*   */ 
/* CONTENT */ 
/*   */ 
// The footer // 

Sia l'intestazione e piè di pagina hanno fissato altezze. Diciamo per esempio che entrambi hanno un'altezza di 20px. Devo impostare l'altezza del contenuto al 100% meno 40px (intestazione + altezza del piè di pagina). So che posso farlo facilmente con JavaScript, ma sarebbe bello imparare come farlo con un semplice CSS, se è possibile.

Answer 1

#header /* hypothetical name */ 
{ 
    height:100%; 
} 

#header p /* or any other tag */ 
{ 
    margin:20px 0 20px 0; 
} 

Assicurati di non posizionare margine e altezza nello stesso tag. Sperimenterai dei risultati folli.

Answer 2

Posizionare una posizione fissa sull'intestazione e sul piè di pagina e impostarli rispettivamente sulla parte superiore della parte inferiore della finestra. Quindi posiziona un riempimento superiore e inferiore nell'area del contenuto di 20 px.

#header{position:fixed;top:0} 
#footer{position:fixed;bottom:0} 
#content{padding:20px 0} 

Answer 3

Questo esempio sembra mostrare il modo più efficace per farlo. In realtà, è un po 'buggato in IE, perché a volte il ridimensionamento va storto. Vale a dire, quando si esegue un ridimensionamento dall'angolo in basso a destra e si esegue semplicemente un ridimensionamento verticale a mano (abbastanza difficile da eseguire a volte), la pagina non verrà aggiornata in IE. Ho avuto lo stesso problema con questo e, dopo tutto, l'ho risolto con JS, a causa di altri eventi sulla mia pagina web.

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

risposta di Marnix comporta l'uso del padding superiore e inferiore dell'elemento contenuto; il mio comporta l'uso del bordo superiore e inferiore.

mi sono imbattuto su questa soluzione da sola durante il tentativo di capire come fare qualcosa di simile senza ricorrere alle tabelle: rendere dell'elemento centrale dell'altezza di 100%, ma poi impostare il modello di box-sizing a "border-box "(in modo che l'altezza includa non solo il contenuto all'interno della scatola ma anche i bordi attorno alla scatola), rendere i bordi superiore e inferiore veramente spessi (come, ad esempio, 20px), quindi utilizzare il posizionamento fisso per sovrapporre l'intestazione e il piè di pagina i bordi superiori e inferiori pazzi di spessore dell'elemento centrale.

Ecco il mio CSS campione:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#content { 
    height: 100%; 

    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
     /* Ensure that the height of the element includes the 
     box border, not just the content */ 

    border: 0; 
    border-top: 20px solid white; 
    border-bottom: 20px solid white; 
     /* Leave some space for the header and footer to 
     overlay. */ 
} 
#header, 
#footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 20px; 
    background-color: #eee; 
     /* Specify a background color so the content text doesn't 
     bleed through the footer! */ 
} 
#header { 
    top: 0; 
} 
#footer { 
    bottom: 0; 
} 

Questo funziona in Google Chrome 24 per Mac. Non l'ho provato in altri browser, però.

Speriamo che questo possa aiutare qualcun altro che sta ancora affrontando la tentazione di utilizzare solo un tavolo e ottenere già il layout di pagina. :-)

Answer 5

Se il browser supporta CSS3, provare a utilizzare l'elemento CSS Calc()

height: calc(100% - 65px); 

si potrebbe anche voler aggiungere opzioni di compatibilità del browser:

height: -o-calc(100% - 65px); /* opera */ 
height: -webkit-calc(100% - 65px); /* google, safari */ 
height: -moz-calc(100% - 65px); /* firefox */