Faire de l'enfant div prendre le max de hauteur

Je suis en train de faire la .box-content div prendre le max de hauteur il est à gauche à l'intérieur de boxA/boxB div. J'ai eu un div .box-header et un .box-content à l'intérieur de boxA/boxB div. Le .box-content est le partage d'une div avec le .box-header.

Dans ce JSFiddle vous pouvez voir que le .box-content se passe à l'extérieur de celle du parent div.

Comment puis-je résoudre ce pur CSS de prendre en compte ces 2 règles:

  1. La hauteur de la .box-content est extensible (croissance/réduction
    chaque fois que la taille de la fenêtre de modification);
  2. La .box-content a une hauteur minimale de 200px;
Je ne comprends pas le point de notamment le "bootstrap" et ne l'utilisez pas.
.container est de bootstrap 🙂

OriginalL'auteur Quoter | 2013-12-16

  1. 3

    si overflow est une option (qui je me sens rend la vie facile ici), voici un démo

    Garder HTML de même, votre css (2 changements de ligne) ci-dessous

    .boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
    overflow:hidden; /*added this*/
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
    overflow:hidden;/*added this*/
}
    M'a fallu un certain temps pour obtenir ce travail. Quelque chose d'autre était tout gâcher. merci!

    OriginalL'auteur NoobEditor

  2. 4

    Le problème auquel vous êtes confronté est :

    .box-content est fixée à 100% de son parent, mais il y a aussi le .box-header qui est à l'intérieur de son parent, .box-content est poussé vers le bas et a à débordement (la taille de .box-content) de garder 100% de la hauteur de celle du parent.

    Je peux vous proposer ce css :

    .box-content { height: 90%; }

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:10%;
}

    Voir ce VIOLON

    mis à jour le violon (oublié un coma qui écoute de la réactivité de la hauteur)
    Je le savais, mais c'était pour illustrer ce que je tente d'accomplir 😀 eu à dire que l'en-tête doit être réglé. Un extensible en-tête est très moche. Merci pour votre aide! +1

    OriginalL'auteur web-tiki

  3. 2

    Vous pouvez définir le parent divs à défilement dans le cas où l'enfant div a une plus grande hauteur.

    .boxA{ overflow:auto; }
    .boxB{ overflow:auto; }

    OriginalL'auteur saintybalboa