Страница не прокручивается при переполнении div - PullRequest
Новая
       10

Страница не прокручивается при переполнении div

0 голосов
/ 06 мая 2020

У меня есть stati c страница с 1 HTML и 1 CSS файлом. Когда я тестирую страницу и набираю текст в многострочное текстовое поле (последнее на странице), пока страница не переполнится, этого не происходит. Div с идентификатором 'centered' имеет высоту 'fit-content', и его проверка показывает, что он соответствует содержимому и переполняется, но браузер не показывает мне полосу прокрутки. Также scrollBy не работает. И это не только один браузер (Chrome рабочий стол, android; Firefox рабочий стол, android).

Вот индекс. html: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formr.io</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
        <!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" href="index.css">
        <script defer>
            document.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll(".long-answer").forEach((el) => {
                    let offset = el.offsetHeight - el.clientHeight;
                    el.addEventListener('input', function (event) {
                        event.target.style.height = 'auto';
                        event.target.style.height = event.target.scrollHeight + offset + 'px';
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="centered">

            <!-- Header -->

            <div class="question-container">
                <div class="form-header-color-bar"></div>
                <div class="form-header-title">Тест върху "Неразделни"</div>
                <div class="form-header-desc">Упражнителен тест върху "Неразделни"</div>
           </div>

            <br>

            <!-- Questions -->
            <div class="question-container">

                 <div class="question-title">Име и клас <span style="color: red;">*</span></div>

                 <br>

                 <div class="text-answer-container">
                    <input placeholder="Вашия отговор." class="short-answer" type="text" />
                 </div>
            </div>

            <br>

            <div class="question-container">

                <div class="question-title">Какво мислите за решението на Иво? Прекалил ли е? <span style="color: red;">*</span></div>

                <br>

                <div class="text-answer-container">
                   <input placeholder="Вашия отговор." class="short-answer" type="text" />
                </div>
           </div>

           <br>

           <div class="question-container">

                <div class="question-title">Теза: "Той ме прегърнал с клони, аз съм в него вейки свряла." <span style="color: red;">*</span></div>

                <br>

                <div class="text-answer-container">
                   <textarea placeholder="Вашия отговор." class="long-answer"></textarea>
                </div>
           </div>
        </div>
    </body>
</html>

А вот и индекс. css: 

:root {
    --main-color: #d08aff;
    /*--background-color: #f8edff;*/
    --background-color: rgb(240, 235, 248);
}

body {
    background-color: var(--background-color);
    margin: 0px;
}

#centered {
    margin-top: 15px;
    position: fixed;
    transform: translate(-50%, 0%);
    left: 50%;
    width: 90%;
    height: fit-content;
    min-width: 100px;
    max-width: 600px;
}

.question-container {
    background-color: white;
    padding: 0px 0px 15px 0px;
    border-radius: 13px;
    border: 1px solid #e6e3e8;
    width: 100%;
    height: fit-content;
}

.question-container .form-header-title {
    font-family: 'Source Sans Pro', sans-serif;
    word-break: break-all;
    font-size: 24pt;
    text-align: left;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 0px;
}

.question-container .form-header-desc {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 10.5pt;
    text-align: left;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 0px;
    word-break: break-all;
}

.question-container .form-header-color-bar {
    margin: 0px;
    width: 100%;
    height: 15px;
    background-color: var(--main-color);
    border-radius: 13px 13px 0px 0px;
}

.question-container .question-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14pt;
    text-align: left;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 0px;
    word-break: break-all;
}

.question-container .text-answer-container .short-answer {
    font-family: 'Source Sans Pro', sans-serif;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid var(--main-color);
    border-radius: 7px;
    height: 25px;
    min-width: 91px;
    max-width: 300px;
    width: calc(100% - 14px);
}

.question-container .text-answer-container .short-answer:focus {
    transition: 0.2s;
    outline: none;
    box-shadow: 0px 0px 5px 1px var(--main-color);
}

.text-answer-container {
    margin-left: 15px;
    margin-right: 15px;
}

.question-container .text-answer-container .long-answer {
    font-family: 'Source Sans Pro', sans-serif;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid var(--main-color);
    border-radius: 7px;
    min-width: 91px;
    max-width: 300px;
    width: calc(100% - 14px);
    resize: none;
    overflow: hidden;
}

.question-container .text-answer-container .long-answer:focus {
    transition: 0.2s;
    outline: none;
    box-shadow: 0px 0px 5px 1px var(--main-color);
}

Спасибо за ваше время.

1 Ответ

0 голосов
/ 06 мая 2020

Если div зафиксирован, он не может прокручиваться.

Попробуйте следующее:

#centered { position: absolute; }

вместо

#centered { position: fixed; }

...