Plusieurs divs pour diviser la hauteur de la div extérieure et la remplir

Question

J'ai plusieurs divs et j'ai besoin qu'ils remplissent la hauteur du contenu pour que chaque div ait la même hauteur. Leur hauteur doit s'adapter au redimensionnement de la fenêtre du navigateur, elle ne peut donc pas être fixe. Le nombre de divs peut varier entre 7 et 12. Je ne sais pas si cela peut être réalisé avec du CSS pur ou si jQuery doit être impliqué.

Avant:
divs originaux http://imageshack.us/a/img14/9964/23446096.jpg

Après:
divs redimensionnés http://imageshack.us/a/img42/9183/76164750.jpg

Answer 1

Vous devez utiliser jQuery avec quelque chose comme ceci:

var $yourDivs = $('div');
function update(){
    var $winHeight = $(window).height();
    var $divNumber = $yourDivs.length;
    var $newDivHeight = ($winHeight / $divNumber);
    $yourDivs.css('height', $newDivHeight + 'px');
};

Mais au lieu d'obtenir la hauteur de la fenêtre, obtenez la hauteur de votre zone de contenu.

Answer 2

Ce n'était pas aussi grave que je le pensais. Voir le code ci-dessous :

HTML

    Test divs

    Tête

        Div 1
        Div 2
        Div 3
        Div 4
        Div 5

    Pied de page

CSS

body, html {
    height: 100%;
}

body, body * {
    margin: 0;
    padding: 0;
}

#header, #content, #footer, #div1, #div2, #div3, #div4, #div5 {
    border: 1px solid black;
}

#content {
    position: relative;
    height: 80%;
}

#div1, #div2, #div3, #div4, #div5 {
    position: absolute;
    right: 0;
    height: 20%;
    width: 150px;
}

#div1 {
    top: 0;
}

#div2 {
    top: 20%;
}

#div3 {
    top: 40%;
}

#div4 {
    top: 60%;
}

#div5 {
    top: 80%;
}

(Bordures uniquement à titre de référence visuelle) Ajustez la hauteur et la position en haut des divs en fonction du nombre de divs présents (100% / nombre de divs, en commençant de 0). Selon un commentaire sur cette question, cela ne fonctionne pas dans IE8, mais je n'ai pas moyen de tester cela pour le moment. Confirmé comme fonctionnant dans IE9, IE9 en mode de compatibilité, Chrome 24 et FF 18.