Protéger les enfants de la div de déborder div parent

J'ai un div parent contenant un en-tête de section et d'une section de corps. Le div parent a une hauteur maximale, mais pas de hauteur minimale.

Voir cet exemple: https://jsfiddle.net/1o79a6nc/2/

CSS:

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

HTML:

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

Je veux le corps de seulement augmenter de sorte qu'il s'adapte à l'intérieur de la mère (y compris le remplissage), et ensuite appliquer des barres de défilement si nécessaire.

Comme le montre l'exemple, j'ai essayé overflow-y: auto, cependant cela ne fonctionne pas comme je l'ai prévu.

Edit: je veux des barres de défilement n'apparaissent sur le corps, de sorte que la section d'en-tête et le parent remplissage en bas sont toujours visibles.

InformationsquelleAutor Right Of Zen | 2016-06-28

css overflow

Vous pouvez simplement placer le récipient à flexbox.

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}

jsFiddle

CSS:

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1; /* added */
}
#head {
  background-color: green;
}

HTML:

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

Une autre option serait d'utiliser CSS table, quelques extra code HTML est nécessaire. Et max-height ne fonctionne pas avec le tableau de mise en page, afin de l'utiliser height à la place.

jsFiddle

CSS:

#cont {
  padding: 5px;
  background-color: red;
  height: 150px;
  width: 50%;
  display: table;
}
#head,
#body {
  display: table-row;
}
#head > div,
#body > div {
  display: table-cell;
  position: relative;
}
#body > div {
  height: 100%;
}
#body > div > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

HTML:

<div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>
      <div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
      </div>
    </div>
  </div>
</div>

InformationsquelleAutor Stickers

2

j'ai mis à jour votre jsfiddle vérifier

jsfiddle
```
#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  overflow-y: scroll;
}
#body {
  background-color: blue;

}
#head {
  background-color: green;
}
```
- cela fonctionne aussi dans IE
- Veuillez voir mon edit; ce n'est pas ce dont j'ai besoin.
- lien ici, check it out
- Que surtout fonctionne pour cet exemple, mais il ne fonctionnera pas dans le cas général. L'en-tête peut prendre jusqu'à 50% de la hauteur disponible, par exemple.
InformationsquelleAutor kapigsaan

Vous devez vous connecter pour publier un commentaire.