HTML - полоса прокрутки обрезает текст - PullRequest
Новая
       10

HTML - полоса прокрутки обрезает текст

2 голосов
/ 08 апреля 2019

Я пытаюсь получить элемент, чтобы он соответствовал оставшемуся пространству (которое изменит ), а затем прокрутите, если необходимо. к сожалению, он не помещается на оставшееся место правильно.

Вот код: 

<!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, но не могу найти ответ. Элементы вне области прокрутки не помогает.

Установка высоты на 100% должна заполнить оставшееся пространство. Почему не так?

Ответы [ 3 ]

0 голосов
/ 08 апреля 2019

Вот почему:

Проблема в том, что внутри <td> есть два элемента типа блока. Таким образом, второй блок <details>, высота которого установлена ​​на 100%, будет занимать 100% высоты <td>, но есть первый блок <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>
0 голосов
/ 08 апреля 2019

Этот стиль не работает в тд, я предлагаю вам изменить на 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>
0 голосов
/ 08 апреля 2019

Укажите высоту для первого элемента детализации, в данном случае 76px.

Изменить высоту второго элемента сведений (fillMe) со 100% на расчет (100% - 76px)

У меня это сработало

...