Переполнение, вызывающее прокрутку всей страницы - PullRequest
Новая
       27

Переполнение, вызывающее прокрутку всей страницы

1 голос
/ 25 апреля 2019

Я пытаюсь создать страницу, которая не прокручивается. Некоторые дочерние элементы на странице могут прокручиваться, но я пытаюсь предотвратить прокрутку страницы в целом. У меня есть очень вложенный дочерний элемент, который при переполнении получает полосу прокрутки, но также вызывает увеличение основного документа и получение полосы прокрутки.

Это суть проблемы, но есть еще несколько вложенных уровней, которые могут быть фактором. 

<div class="h-100 d-flex flex-column">    
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
    </div>
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
    </div>
    <div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
        <div class="bg-gray m-4" style="height: 2000px;">
                    The height of this content causes BOTH scroll bars to appear. I only want a bar on the 
                    'green section'
        </div>
    </div>
    <div class="bg-red flex-grow-1">
    </div>            
</div>

Эта ручка кода демонстрирует настройку моего приложения. Переполняющий элемент вложен глубоко во многие гибкие дисплеи (из вспомогательных классов начальной загрузки 4).

https://codepen.io/averyferrante/pen/YMdNpO

Я хочу, чтобы прокручивалась только зеленая часть кода, а не весь документ для увеличения / прокрутки.

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Проблема в том, что в паре ваших контейнеров отсутствуют определения высоты. В результате дочерние элементы этих контейнеров игнорируют процентную высоту, примененную к ним.

Добавьте это к своему коду: 

 <div class="flex-grow-1" style="height: calc(100% - 48px);">

Это правило высоты дает контейнеру определенную высоту, компенсируя высоту его родного брата.

В другом правиле высоты отсутствовали три уровня внизу: 

 <div class="d-flex flex-column w-100" style="height: 100%;">

пересмотренный кодекс

Более подробные объяснения:

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

Вы пробовали играть с position: absolute?Затем вы можете установить ширину и высоту по мере необходимости, и в красном поле исчезнет полоса прокрутки!

...