Question

我试图获取一个适合剩余空间的元素（将更改），然后根据需要滚动。不幸的是，它无法正确容纳剩余空间。

代码如下：

<!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％应该可以填充剩余空间。为什么不呢？

Answer 1

为第一个细节元素指定高度，在这种情况下为76px。

将第二个详细信息元素（fillMe）的高度从100％更改为calc（100％-76px）

对我来说有效

Answer 2

这是原因：

问题在于<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>

Answer 3

此样式在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>

HTML-滚动条可截断文本

3 个答案: