Faire div (taille) occuper la taille restante du parent

http://jsfiddle.net/S8g4E/

J’ai un conteneur div avec deux enfants. Le premier enfant a une taille donnée. Comment puis-je faire en sorte que le deuxième enfant occupe “l’espace libre” du conteneur div sans donner une hauteur spécifique?

Dans l’exemple, le div rose devrait également occuper l’espace blanc.


Semblable à cette question: Comment faire div occuper la hauteur restante?

Mais je ne veux pas donner une position absolue .

    L’extension de l’enfant #down pour remplir l’espace restant de #container peut s’effectuer de différentes manières en fonction de la prise en charge du navigateur que vous souhaitez atteindre et de la hauteur définie par #up .

    Des échantillons

     .container { width: 100px; height: 300px; border: 1px solid red; float: left; } .up { background: green; } .down { background: pink; } .grid.container { display: grid; grid-template-rows: 100px; } .flexbox.container { display: flex; flex-direction: column; } .flexbox.container .down { flex-grow: 1; } .calc .up { height: 100px; } .calc .down { height: calc(100% - 100px); } .overflow.container { overflow: hidden; } .overflow .down { height: 100%; } 
     
    grid
    grid
    grid
    grid
    grid
    grid
    flexbox
    flexbox
    flexbox
    flexbox
    flexbox
    flexbox
    calc
    calc
    calc
    calc
    calc
    calc
    overflow
    overflow
    overflow
    overflow
    overflow
    overflow

    Cela fait presque deux ans que j’ai posé cette question. Je viens de proposer css calc () qui résout ce problème et j’ai pensé qu’il serait intéressant de l’append au cas où quelqu’un aurait le même problème. (Au fait, j’ai fini par utiliser la position absolue).

    http://jsfiddle.net/S8g4E/955/

    Voici le css

     #up { height:80px;} #down { height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case. } 

    Et plus d’informations à ce sujet ici: http://css-sortingcks.com/a-couple-of-use-cases-for-calc/

    Support du navigateur: http://caniuse.com/#feat=calc

    Ma réponse utilise uniquement CSS et n’utilise pas de débordement: masqué ou affiché: rangée de tableau. Il faut que le premier enfant ait réellement une taille donnée, mais dans votre question, vous indiquez que seul le deuxième enfant doit avoir sa taille non spécifiée, alors je pense que vous devriez trouver cela acceptable.

    html

     
    Text
    Text
    Text
    Text
    Text
    Text

    css

     #container { width: 300px; height: 300px; border:1px solid red;} #up { background: green; height: 63px; float:left; width: 100% } #down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; } 

    http://jsfiddle.net/S8g4E/288/

    vérifier la démo – http://jsfiddle.net/S8g4E/6/

    utiliser css –

     #container { width: 300px; height: 300px; border:1px solid red; display: table;} #up { background: green; display: table-row; } #down { background:pink; display: table-row;} 

    Vous pouvez utiliser des flottants pour pousser le contenu vers le bas:

    http://jsfiddle.net/S8g4E/5/

    Vous avez un conteneur de taille fixe:

     #container { width: 300px; height: 300px; } 

    Le contenu est autorisé à circuler à côté d’un flottant. Sauf si nous réglons le flotteur sur la largeur maximale:

     #up { float: left; width: 100%; } 

    Alors que #up et #down partagent la position la plus haute, le contenu de #down ne peut commencer qu’après le bas du #up :

     #down { height:100%; }​ 

    Sauf si je suis mal compris, vous pouvez simplement append de la height: 100%; et overflow:hidden; à #down .

     #down { background:pink; height:100%; overflow:hidden; }​ 

    DEMO en direct

    Edit: Puisque vous ne voulez pas utiliser le overflow:hidden; , vous pouvez utiliser display: table; pour ce scénario; cependant, il n’est pas supporté avant IE 8. ( display: table; support )

     #container { width: 300px; height: 300px; border:1px solid red; display:table; } #up { background: green; display:table-row; height:0; } #down { background:pink; display:table-row; }​ 

    DEMO en direct

    Note: Vous avez dit que vous voulez que la hauteur de #container soit à la hauteur de #container moins la hauteur de #up . L’ display:table; la solution fait exactement cela et ce jsfiddle le dépeindra clairement.

    Je ne suis pas sûr que cela puisse être fait uniquement avec CSS, sauf si vous êtes à l’aise avec des illusions. Peut-être utiliser la réponse de Josh Mein et mettre #container à overflow:hidden .

    Pour ce que ça vaut, voici une solution jQuery:

     var contH = $('#container').height(), upH = $('#up').height(); $('#down').css('height' , contH - upH);