Модальная форма. Как сделать прокрутку при превышении 100% ?

@renat_dmitriev · Регистрация: 26.08.2016

Студворк — интернет-сервис помощи студентам

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

В интернете нашел следующий способ:

HTML5
1
2
3
4
5
6
7
8
9
<div id = modal-background>
  <div id = modal-form>
    <div id= container>
      <h1> Надпись 1 </h1><h1> Надпись 2 </h1><h1> Надпись 3 </h1><h1> Надпись 4 </h1>
       <h1> Надпись 5 </h1><h1> Надпись 1 </h1><h1> Надпись 2 </h1><h1> Надпись 3 </h1>
       <h1> Надпись 4 </h1><h1> Надпись 5 </h1>
    </div>
   </div>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#modal-background
{
    padding: 0px 50px 0px 50px;
    text-align: center;
    white-space: nowrap;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.4)
}
    
#modal-background:after
{
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  content: '';
  
}
    
#modal-form
{     
  display: inline-block;
  vertical-align: middle;
 
  max-height: 100%;
  //overflow-y: scroll;
  background-color: green;
  
}
        
#container
{
  max-height: 100%;
  overflow-y: scroll;
 
  margin: 50px;
  padding: 10px;
 
  background-color: white;
 
  text-align: left;
  white-space: normal;
}

https://codepen.io/dimoff66/pen/zRMPWp

Данный способ справляется с центрированиями, но прокручивается все равно весь экран, хотя прокручиваться должен только белый #container с содержимым.

Подскажите пожалуйста как исправить этот вариант или предложите другой способ, возможно без вспомогательной #modal-form.

Заранее большое спасибо.

@Fedor92 · 27.02.2018, 12:14

Самое топорное решение:

CSS
1
2
3
#container{
height:200px;
}

Скролл то вы отобразили, а высоту блока кто указывать будет?

@AlexZaw · 27.02.2018, 12:16

Условие появления скролла это ограничение по ширине или высоте, ограничьте container по max-height и скролл будет появляться

@renat_dmitriev · 27.02.2018, 12:52 **[ТС]**

AlexZaw, Контейнер ограничен, как явствует из css

CSS
1
2
3
#container
{
  max-height: 100%;

тем не менее этот max-height не работает и высота #container беззастенчиво превышает высоту родительского блока.

@AlexZaw · 27.02.2018, 13:55

renat_dmitriev, Почитайте про процентые размеры, они высчитываются от размеров родителя с жестко заданными размерами, если у родителя размеры указаны так же в процентах, берется родитель родителя и т.д. до тега html.
Где у вас указаны жесткие размеры?

@renat_dmitriev · 27.02.2018, 14:54 **[ТС]**

AlexZaw, Я немного недопонимаю о чем вы говорите. Никаких жестких процентов нигде нет.

Есть #modal-background, который создает фон - занимая 100% высоты.
Есть #modal-form, который я так понимаю используется для центрирования по вертикали - он также занимает 100% высоты от родителя, то есть равен по высоте родителю
И теперь есть наше видимо модальное окно #container, у которого высота жестко не должна указываться, он растягивается в зависимости от контента, и единственное условие, что если из-за длинного контента высота этого элемента превысит высоту родительского окна, то он не должен увеличиться в размерах, вызывая появление полосы прокрутки у родителя, а должен вместо этого обзавестись собственной полосой прокрутки.

Поэтому высчитывать тут нечего.

@Fedor92 · 27.02.2018, 15:00

Сообщение от renat_dmitriev

Я немного недопонимаю о чем вы говорите. Никаких жестких процентов нигде нет.

О Боги!

Жёстко заданный размер - это размер заданный в px(смотрите мой первый пост)! Никто Вам не говорил про жёстко заданные проценты - Вам говорили про жёстко заданные размеры! Для Вашего случая высота родителя заданая в процентах не подойдёт...

Так понятно?

@renat_dmitriev · 27.02.2018, 15:22 **[ТС]**

О, Боги !

Сколько же раз нужно написать, что никакого жестко заданного размеры быть не может, так как верстка адаптивная, экран может быть высотой 200 пикселей или 800 пикселей и единственное требование к модальному окну - чтобы оно не вылезало за пределы экрана.

Так понятно?

Добавлено через 5 минут
AlexZaw, Жестких размеров нет. Экран может быть разной высоты и корневой элемент всегда определен как 100%. Значит ли это что моя задача нерешаема?

@Fedor92 · 27.02.2018, 15:27

Сообщение от renat_dmitriev

О, Боги !

Всё-всё молчу...

Лучше чаю выпейте или лучше отдохните, погуляйте - подышите свежим воздушком...

@renat_dmitriev · 27.02.2018, 15:38 **[ТС]**

Fedor92,

Не по теме:

Я очень ценил этот ресурс за отсутствие на нем истеричек. Впервые за много месяцев сталкиваюсь с хамством, видимо посещал раньше не те разделы. Если мои сообщения вызывают у вас какое-то напряжение, будьте светом самому себе - я останусь в темноте. Благодарю за понимание. ;)

@Fedor92 · 27.02.2018, 16:35

Хамство?

Где? Я Вам лишь предложил отдохнуть немного...

@AlexZaw · 27.02.2018, 16:49

Смотрите, для container у вас задана max-height:100%, что означает что его максимальная высота будет 100% от родителя
(<div id = modal-form>)
Максимальная высота modal-form равна 100% от высоты его родителя (<div id = modal-background>).
Высота modal-background равна 100%; от его родителя (body)
Высота body у нас нигде не указана, значит ищем высоту у родителя body - html.
Высота html нигде не указана, значит вычисляется по высоте его детей, а именно высота html равна высоте body, высота которого равна высоте его единственного ребенка modal-background.
Высота modal-background вычисляется из высоты его ребенка modal-form.
Высота modal-form вычисляется из высоты его ребенка container + маржины и паддинги.
Итого имеем - Конечную высоту container, который и задает высоты всему остальному. Вот такой вот круговорот.

Сообщение от renat_dmitriev

так как верстка адаптивная

Адаптацию можно сделать через медиазапросы, вы же делаете резиновую верстку, которая, скорее всего, будет плохо выглядеть на маленьких экранах

Сообщение от renat_dmitriev

Значит ли это что моя задача нерешаема?

Нет не значит, просто решается она немного другим образом, если никто не подскажет решение, то попозже скину вариант

@renat_dmitriev · 27.02.2018, 16:55 **[ТС]**

Все, я понял свою проблему...В теме был просто кусок моей страницы, в реальном проекте у контейнера стояло свойство display: table, а свойство overflow-y как выяснилось работает только для блочных элементов. Изменение свойства display на inline-block привело к появлению полосы прокрутки.

Никаких жестко заданных в пикселях размеров не потребовалось.

Qwerty_Wasd · 27.02.2018, 17:01

del

@renat_dmitriev · 27.02.2018, 17:05 **[ТС]**

AlexZaw,

Сообщение от AlexZaw

Высота body у нас нигде не указана, значит ищем высоту у родителя body - html.

Ну так в этом случае достаточно поставить в css

CSS
1
body,html(height: 100%}

и все прекрасно работает без необходимости искать дополнительные способы.

Хоть проблема в реальном проекте была в другом, как описал сообщением выше, тем не менее спасибо за информацию - запомню на будущее.

@AlexZaw · 27.02.2018, 17:13

Хм, в этом примере нигде не было указано display-table, но тем не менее не работало так как надо.
Впрочем рад что в итоге у вас все заработало, но все-таки советую разобраться как работают размеры в процентах.
Как вы думаете какой размер будет у блока .in в следующем примере?

HTML5
1
2
3
<div class="out">
  <div class="in"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
.out{
  height: 300px;
  outline: 1px solid black;  
}
.in{
  width: 400px;
  outline: 1px solid red;
  padding-top: 50%;
 
}

@renat_dmitriev · 27.02.2018, 18:07 **[ТС]**

Сообщение от AlexZaw

Хм, в этом примере нигде не было указано display-table, но тем не менее не работало так как надо.

Для этого примера правильный ответ: добавить в css

CSS
1
body,html(height: 100%}

@SiarheiSiarhei · 27.02.2018, 18:09

а, что вам мешает в (vh) или (vw) - это тоже жесть... делов то...

@AlexZaw · 27.02.2018, 18:17

Сообщение от renat_dmitriev

Для этого примера правильный ответ: добавить в css

Этого, к сожалению, недостаточно

Ну да не будем, главное что задачку решили

@SiarheiSiarhei · 27.02.2018, 18:31

подложку формы размер в 102.5% отступ ей в право -2.5% ... и полоса прокрутки уйдет в минус с экрана... и укажи икон "крути"

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.02.2018, 12:16
	Условие появления скролла это ограничение по ширине или высоте, ограничьте container по max-height и скролл будет появляться 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.02.2018, 13:55
	renat_dmitriev, Почитайте про процентые размеры, они высчитываются от размеров родителя с жестко заданными размерами, если у родителя размеры указаны так же в процентах, берется родитель родителя и т.д. до тега html. Где у вас указаны жесткие размеры? 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	27.02.2018, 14:54 [ТС]
	AlexZaw, Я немного недопонимаю о чем вы говорите. Никаких жестких процентов нигде нет. Есть #modal-background, который создает фон - занимая 100% высоты. Есть #modal-form, который я так понимаю используется для центрирования по вертикали - он также занимает 100% высоты от родителя, то есть равен по высоте родителю И теперь есть наше видимо модальное окно #container, у которого высота жестко не должна указываться, он растягивается в зависимости от контента, и единственное условие, что если из-за длинного контента высота этого элемента превысит высоту родительского окна, то он не должен увеличиться в размерах, вызывая появление полосы прокрутки у родителя, а должен вместо этого обзавестись собственной полосой прокрутки. Поэтому высчитывать тут нечего. 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	27.02.2018, 15:22 [ТС]
	О, Боги ! Сколько же раз нужно написать, что никакого жестко заданного размеры быть не может, так как верстка адаптивная, экран может быть высотой 200 пикселей или 800 пикселей и единственное требование к модальному окну - чтобы оно не вылезало за пределы экрана. Так понятно? Добавлено через 5 минут AlexZaw, Жестких размеров нет. Экран может быть разной высоты и корневой элемент всегда определен как 100%. Значит ли это что моя задача нерешаема? 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	27.02.2018, 15:38 [ТС]
	Fedor92, Не по теме: Я очень ценил этот ресурс за отсутствие на нем истеричек. Впервые за много месяцев сталкиваюсь с хамством, видимо посещал раньше не те разделы. Если мои сообщения вызывают у вас какое-то напряжение, будьте светом самому себе - я останусь в темноте. Благодарю за понимание. ;) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.02.2018, 16:35
	Хамство? Где? Я Вам лишь предложил отдохнуть немного... 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	27.02.2018, 16:55 [ТС]
	Все, я понял свою проблему...В теме был просто кусок моей страницы, в реальном проекте у контейнера стояло свойство display: table, а свойство overflow-y как выяснилось работает только для блочных элементов. Изменение свойства display на inline-block привело к появлению полосы прокрутки. Никаких жестко заданных в пикселях размеров не потребовалось. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	27.02.2018, 17:01
	del 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	27.02.2018, 18:09
	а, что вам мешает в (vh) или (vw) - это тоже жесть... делов то... 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	27.02.2018, 18:31
	подложку формы размер в 102.5% отступ ей в право -2.5% ... и полоса прокрутки уйдет в минус с экрана... и укажи икон "крути" 0

Модальная форма. Как сделать прокрутку при превышении 100% ?

Решение