CSS, Stretching div verticale fino a raggiungere l'altezza del suo genitore

Question

Avvolto in un contenitore pageWrapper, ho 3 div in una colonna. Primo (intestazione) e ultimo (navWrapper) hanno altezze fisse. Ho bisogno di quello centrale (contentWrapper) per allungare in altezza fino a quando la pagina div padreWrapper raggiunge l'altezza massima (in base alla finestra del browser).

Disegno lo schema di questo problema.

Ecco un violino della mia soluzione corrente. http://jsfiddle.net/xp6tG/

e qui il codice

CSS e HTML

html, body{ 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    background-color: #E3E3E3; 
 
} 
 

 
#pageWrapper{ 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 600px; 
 
    height: 100%; 
 
} 
 

 
header{ 
 
    display:block; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
#contentWrapper{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
#navWrapper{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background: green; 
 
}

<div id="pageWrapper"> 
 
    <header> 
 
    Header 
 
    </header> 
 
    <div id="contentWrapper"> 
 
    Content 
 
    </div> 
 
    <div id="navWrapper"> 
 
    Nav 
 
    </div> 
 
</div>

E 'quasi funzionando, ma il risultato e' troppo elevata altezza, che provoca che una barra di scorrimento verticale appare.

Answer 1

Ecco un modo per farlo.

Applicare la seguente CSS:

html, body{ height: 100%; margin: 0;} 
body{ background-color: #e3e3e3;} 

#pagewrapper{ 
    margin: 0 auto; 
    position: relative; 
    width: 600px; 
    height: 100%; 
} 
header{ 
    display:block; 
    width: 100%; 
    height: 100px; 
    background: yellow; 
} 
#contentwrapper{ 
    width: 100%; 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    background: blue; 
} 
#navwrapper{ 
    width: 100%; 
    position: absolute; 
    height: 100px; 
    bottom: 0px; 
    left: 0; 
    background: green; 
} 

Dal momento che si è specificato altezze per gli elementi di blocco header e #navwrapper, è possibile utilizzare il posizionamento assoluto rispetto al genitore #pagewrapper blocco per impostare la parte inferiore e superiore offset per #contentwrapper e lo scostamento inferiore per #navwrapper.

Se viene visualizzata una barra di scorrimento, potrebbe essere necessario impostare margin: 0 per i tag html e/o body.

Demo violino: http://jsfiddle.net/audetwebdesign/yUs6r/

Answer 2

Puoi provare ad aggiungere questo script nella vostra sezione dopo il CSS è chiamato. Troverà le altezze degli elementi testa/piede e farà in modo che l'altezza nel centro div riempia lo schermo. Questo è positivo perché se decidi di rendere dinamici gli elementi di intestazione/piè di pagina, questo script funzionerà comunque.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     var totalHeight = $('#pageWrapper').height(); 
     totalHeight -= $('header').height(); 
     totalHeight -= $('#navWrapper').height(); 

     // Remove an extra 20px for good measure 
     totalHeight -= 10; 

     $('#contentWrapper').css('height', 'auto'); 
     $('#contentWrapper').css('min-height', totalHeight); 
}); 
</script>