我试图获得一个元素以适应剩余的空间（将改变），然后根据需要滚动。不幸的是，它不能正确地适应剩余的空间。
这是代码：
<!DOCTYPE html>
<html>
<head>
<style>
* {
border: 1px dotted blue;
vertical-align: top;
overflow: hidden;
}
</style>
</head>
<body>
<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%;" 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>
</body>
</html>
这是显示问题的小提琴。 https://jsfiddle.net/daxdax/anfvuLjw/1/如果你运行它并向下滚动你将看不到最后一个元素。
我查看了stackoverflow但无法找到答案。 Elements outside of scroll area没有帮助。
将高度设置为100％应填充剩余空间。为什么不呢？
指定第一个细节元素的高度，在本例中为76px。
将第二个细节元素（fillMe）的高度从100％更改为calc（100％ - 76px）
对我来说它有效
原因如下：
问题是<td>中有两个块类型元素。所以第二个<details>区块，其高度设置为100％，将占据<td>高度的100％，但是有第一个<details>区块占据溢出高度。
这里修复：使用flexbox
<!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>
这种风格在td中不起作用，我建议你换成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>