J'ai un div parent contenant une section d'en-tête et une section de corps. Le parent div a une hauteur maximale, mais aucune hauteur minimale.
Voir cet exemple: https://jsfiddle.net/1o79a6nc/2/
#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;
}
<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 que le corps ne se développe que de manière à ce qu'il tienne dans le parent (y compris le remplissage), puis applique des barres de défilement si nécessaire.
Comme le montre l'exemple, j'ai essayé overflow-y: auto
, mais cela ne fonctionne pas comme prévu.
Edit: je veux que les barres de défilement apparaissent uniquement sur le corps, de sorte que la section head et le remplissage inférieur du parent soient toujours visibles.
Vous pouvez simplement définir le conteneur sur flexbox.
#cont {
padding: 5px;
background-color: red;
max-height: 150px;
max-width: 50%;
display: flex; /*added*/
flex-direction: column; /*added*/
}
#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;
}
<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 consisterait à utiliser un tableau CSS, un code HTML supplémentaire est nécessaire. Et max-height
ne fonctionne pas avec la disposition de la table, utilisez donc height
à la place.
#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;
}
<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>
j'ai mis à jour votre jsfiddle check it out
#cont {
padding: 5px;
background-color: red;
max-height: 150px;
max-width: 50%;
overflow-y: scroll;
}
#body {
background-color: blue;
}
#head {
background-color: green;
}