Layout dell’altezza 100% CSS

So che questa è una sorta di problema comune e ho cercato alcune soluzioni, ma non sono riuscito a trovare esattamente quello che stavo cercando.

Mi piacerebbe convertirlo in un layout senza tablature.

inserisci la descrizione dell'immagine qui

Nota: l’intestazione e il piè di pagina devono essere impostati su un’altezza fissa in pixel (50px è ok).

Il problema principale che sto avendo è che non riesco a ottenere quel “big box” nel mezzo per comportarsi come quando è fatto con le tabelle. Ci sono soluzioni che funzionano bene per un contenuto di lunghezza variabile (testo, immagini), ma vorrei che questa scatola sembrasse e si comportasse come una scatola – con bordi, angoli arrotondati e tutto il resto.

    Puoi farlo con le proprietà CSS di stile tabella, ma ancora mantenere la tabella con meno markup (che è ancora una vittoria).

    Esempio

    Esempio

    HTML

    content

    CSS

     html, body { height: 100%; padding: 0; margin: 0; } #container { display: table; width: 100%; height: 100%; border: 1px solid red; text-align: center; } #container > div { display: table-row; width: 100%; } #container > div > div { display: table-cell; width: 100%; border-radius:10px; } #header > div { height:50px; border:solid 2px #aaa; } #content > div { height: 100%; background:#f0f4f0; border:solid 2px #5a5; } #footer > div { height:50px; border:solid 2px #a55; } 

    jsFiddle .

    ‘Molteplici coordinate assolute’ è un bel modo per raggiungere questo objective. Questo è quando posizioni una scatola in modo assoluto, quindi dai entrambe le coordinate superiore e inferiore. Senza specificare un’altezza, si ottiene una casella che vuole essere 10px dall’alto e 10px dai bordi inferiori del suo genitore.

    Ecco un esempio

    C’è uno stile specifico per IE6 che dovrai aggiungere, se ti interessa quel browser.

    Ecco un articolo sulla tecnica (più la correzione IE6) – è una buona cosa da sapere, anche se non la usi per questo problema.

    Non hai detto nulla sulle altezze dei tuoi sotto-elementi, quindi ho dovuto fare alcune supposizioni. Potresti usare le percentuali se lo volessi.

       
    Center