J'essaie d'obtenir un élément qui corresponde à l'espace restant (qui va changer), puis fais défiler si nécessaire. malheureusement, il ne rentre pas correctement dans l'espace restant.
Voici le code:
<table>
<tr>
<td style="height:80vh; max-height:80vh;">
<details open>
<summary>Contents here will change in height</summary>
<br><br><br>
</details>
<details id="FillMe" style="height:100%;overflow:auto;max-height:100%;margin:auto;" open>
<summary> Last element does not show</summary>
<script>
var html = [];
for(var i = 0;i < 100; i++) html.push("<br> data "+ i);
document.getElementById("FillMe").innerHTML += html.join('');
</script>
<br>
Last line of data
</details>
</td>
</tr>
</table>
*{
border: 1px dotted blue;
vertical-align: top;
overflow:hidden;
}
Voici le violon montrant le problème. https://jsfiddle.net/daxdax/anfvuLjw/1/ Si vous l'exécutez et faites défiler vers le bas, vous ne verrez pas le dernier élément.
J'ai regardé stackoverflow mais je ne trouve pas la réponse. Éléments en dehors de la zone de défilement n'aide pas.
Le réglage de la hauteur à 100% devrait remplir l'espace restant. Pourquoi pas?
3 Réponses :
Spécifiez une hauteur pour le premier élément de détail, dans ce cas 76px.
Changer la hauteur du deuxième élément de détails (fillMe) de 100% à calc (100% - 76px)
Pour moi, cela a fonctionné
Impossible de définir un pixel défini. La hauteur restante variera.
Voici pourquoi:
Le problème est qu'il y a deux éléments de type bloc à l'intérieur de Ici, il est corrigé: en utilisant flexbox . Ainsi, le deuxième bloc , mais il y a le premier bloc qui prend la hauteur de débordement. <!DOCTYPE html>
<html>
<head>
<style>
* {
border: 1px dotted blue;
vertical-align: top;
}
.infopanel{
height: 80vh;
max-height: 80vh;
width: 20vw;
display: flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start; /*this will keep details at the top*/
/*justify-content:flex-end;*/ /*this will close details to the bottom*/
}
.infopanel>details{
width:100%;
}
.infopanel>.top-detail{
overflow:visible;
max-height: 100%;
}
.infopanel>.bot-detail{
overflow:auto;
}
</style>
</head>
<body>
<div class="infopanel">
<details open class="top-detail">
<summary>Contents here will change in height</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</details>
<details id="FillMe" class="bot-detail" open>
<summary> Last element does not show</summary>
<script>
var html = [];
for(var i = 0;i < 100; i++) html.push("<br> data "+ i);
document.getElementById("FillMe").innerHTML += html.join('');
</script>
<br>
Last line of data
</details>
</div>
</body>
</html>
Avez-vous essayé votre code sur Chrome ou Firefox? Il ne s'ajuste pas correctement à la modification de la taille du premier Étrangement, cela fonctionne dans jfiddle. Je ne connais rien à la flexbox. Je pense que c'est encore nouveau.
J'utilise du chrome. Je ne savais pas exactement quelles données y contenaient, mais essayez la version modifiée. Cela fonctionne bien à mon avis. La hauteur des détails supérieurs s'ajuste pour s'adapter au contenu et le bas s'adapte au reste de la hauteur. Ajustez la hauteur maximale sur le dessus à votre goût.
Ce style ne fonctionne pas dans td, je vous suggère de changer en div
<div style="min-height: 100%;height: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;box-sizing: border-box;display: flex;">
<details open="">
<summary>Contents here will change in height</summary>
<br><br><br>
</details>
<details id="FillMe" style="overflow:auto;box-sizing: border-box;flex: 1;-webkit-box-flex: 1;" open="">
<summary> Last element does not show</summary>
<br> data 0<br> data 1<br> data 2<br> data 3<br> data 4<br> data 5<br> data 6<br> data 7<br> data 8<br> data 9<br> data 10<br> data 11<br> data 12<br> data 13<br> data 14<br> data 15<br> data 16<br> data 17<br> data 18<br> data 19<br> data 20<br> data 21<br> data 22<br> data 23<br> data 24<br> data 25<br> data 26<br> data 27<br> data 28<br> data 29<br> data 30<br> data 31<br> data 32<br> data 33<br> data 34<br> data 35<br> data 36<br> data 37<br> data 38<br> data 39<br> data 40<br> data 41<br> data 42<br> data 43<br> data 44<br> data 45<br> data 46<br> data 47<br> data 48<br> data 49<br> data 50<br> data 51<br> data 52<br> data 53<br> data 54<br> data 55<br> data 56<br> data 57<br> data 58<br> data 59<br> data 60<br> data 61<br> data 62<br> data 63<br> data 64<br> data 65<br> data 66<br> data 67<br> data 68<br> data 69<br> data 70<br> data 71<br> data 72<br> data 73<br> data 74<br> data 75<br> data 76<br> data 77<br> data 78<br> data 79<br> data 80<br> data 81<br> data 82<br> data 83<br> data 84<br> data 85<br> data 86<br> data 87<br> data 88<br> data 89<br> data 90<br> data 91<br> data 92<br> data 93<br> data 94<br> data 95<br> data 96<br> data 97<br> data 98<br> data 99<br> Last line of data
</details>
</div>
Personnellement, je préfère utiliser un framework css qui facilite ce type de mise en page. Dans un matériau angulaire, une simple
Je peux voir que vous utilisez la mauvaise sémantique html et que c'est devenu un peu compliqué. Pourquoi utiliseriez-vous une balise
tableetdetailspour cela? Êtes-vous ouvert à un changement dans la structure html?Ceci est juste une version simplifiée. Il y aura d'autres éléments, et je les aligne par des tableaux.