Как сделать скроллинг внутри бокса при раскрытии меню

@SMakcik · Регистрация: 28.10.2020

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

Добрый день, всем!
Сильно не пинайте, но я не html программист а только понемногу осваиваю азы.
посидев немного и поковыряв просторы интернета, вроде получилось добиться создать раскрывающее меню как необходимо.
Но теперь столкнулся с проблемой, что при развертывании меню текст выходит за бокс.

Ограничил его видимость и добавил scroll. Но он появился и не активен.

HTML5
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="menubox">
  <ul class="menu animated">
    <li class="menu_children">
      <input type="checkbox" name ="group-1" id="group-1" checked>
      <label for="group-1">Подсистема маркировки</label>
      <ul>
        <li class="menu_children">
          <input type="checkbox" name ="sub-group-1" id="sub-group-1">
          <label for="sub-group-1">Настройка подсистемы маркировки</label>
          <ul>
            <li><a href="db/M/settings/org.html">Организации</a> </li>
            <li><a href="#1">Склады</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-2" id="group-2" checked>
      <label for="group-2">Раздел: Закупки</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-3" id="group-3" checked>
      <label for="group-3">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-4" id="group-4" checked>
      <label for="group-4">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-5" id="group-5" checked>
      <label for="group-5">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-6" id="group-6" checked>
      <label for="group-6">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-7" id="group-7" checked>
      <label for="group-7">Подсистема маркировки</label>
      <ul>
        <li class="menu_children">
          <input type="checkbox" name ="sub-group-7" id="sub-group-7">
          <label for="sub-group-7">Настройка подсистемы маркировки</label>
          <ul>
            <li><a href="db/M/settings/org.html">Организации</a> </li>
            <li><a href="#1">Склады</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-8" id="group-8" checked>
      <label for="group-8">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-9" id="group-9" checked>
      <label for="group-9">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
    <li class="menu_children">
      <input type="checkbox" name ="group-10" id="group-10" checked>
      <label for="group-10">Раздел: Продажи</label>
      <ul>
        <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li>
        <li><a href="#1">Поступление товаров (услуг)</a> </li>
      </ul>
    </li>
  </ul>
</div>

@mrtoxas · 28.10.2020, 12:08

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

добавил scroll. Но он появился и не активен

Видимо, не туда добавили. Приложите CSS-код, чтобы можно было воспроизвести проблему.

@SMakcik · 28.10.2020, 12:15 **[ТС]**

Запаковал и вложил

@SMakcik · 28.10.2020, 21:58 **[ТС]**

актуально

@mrtoxas · 29.10.2020, 02:05

Ограничьте высоту .menu

CSS
1
2
3
.menu {
    height: 300px;
}

@SMakcik · 29.10.2020, 10:48 **[ТС]**

т.е. всегда нужно ограничивать высоту?
А если мне нужно чтобы этот блок начинался с верху 300px и был всегда до низу экрана?

@mrtoxas · 29.10.2020, 11:32

Высота должна ограничиваться вручную или автоматически. Если блок развернут на 100%, то что в нем прокручивать?

@SMakcik · 29.10.2020, 13:55 **[ТС]**

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

@SMakcik · 29.10.2020, 14:01 **[ТС]**

В прикрепленном файле видно, что меню уходит далеко в низ за конец блока (который как раз ограничивается нижней точкой окна браузера)
Красным помечено как должен появиться скроллинг

@SMakcik · 30.10.2020, 10:43 **[ТС]**

ап+

@andyyy · 30.10.2020, 16:07

CSS
1
height: 100% ?

@SMakcik · 30.10.2020, 19:05 **[ТС]**

А почему-то когда указываешь 100% то меню располагается с верха экрана до низу, а не занимает 100% блока в который входит меню.
Где-то допустил косяк

Добавлено через 3 минуты
Сейчас попробовал. 100% не помогает

@gogolik · 30.10.2020, 19:40

SMakcik, вам ответили, что 100% - не поможет и нужно ограничивать высоту. В тоннах вашего кода нет никакого желания разбираться, поэтому и нет дальнейших ответов. Выделите основное.

@SMakcik · 30.10.2020, 19:46 **[ТС]**

Вы к сожалению не правы и подобных ответов не было.

@andyyy · 31.10.2020, 11:38

Честно говоря, не понятно что вы хотите, судя по картинкам - вы хотите чтобы высота блока при изменении экрана совпадало с высотой браузера?

Добавлено через 1 минуту

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

А если мне нужно чтобы этот блок начинался с верху 300px и был всегда до низу экрана?

написали же что если хотите ограничить, то выставляйте конкретную высоту, если хотите полную высоту что показало, вообще не ставьте ее

@SMakcik · 31.10.2020, 19:35 **[ТС]**

Еще разок что я хочу.

Есть блок левого контента в котором будет располагаться шапка и само меню.
Сам контейнер будет отображаться на 100% высоты экрана (как и отображается)

Сам блок меню нначало 300px а низ должен ограничиваться нижнем положением окна браузера.
Что и было показано на скрине

Так понятно или еще что не понятно.

@SMakcik · 03.11.2020, 10:27 **[ТС]**

ап+

@AlexZaw · 03.11.2020, 14:14

SMakcik, так?

HTML5
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
44
45
46
47
48
49
50
51
52
<div class="wrap">
  <div class="out">
    <div class="in">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate iusto omnis culpa, assumenda, quibusdam minus corporis distinctio consectetur saepe ex ad magnam ratione accusantium odit nisi, voluptas totam earum unde? </div>
    <div class="menu">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
      </ul>
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, eos doloribus eius illum corrupti nam a praesentium voluptatum nisi, corporis officiis provident. Culpa fugit quisquam cupiditate quod natus tenetur voluptas.
  </p>
</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
body {
  margin: 0;
  height: 150vh;
}
.wrap {
  padding-left: 200px;
}
 
.out {
  width: 200px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.in {
  height: 300px;
  background: #0f0;
}
.menu {
  width: 100%;
  background: #f00;
  position: absolute;
  top: 300px;
  bottom: 0;
  overflow: auto;
}

@SMakcik · 03.11.2020, 15:47 **[ТС]**

Спасибо за ответ.
Проверил и сравнил. Оказалось нужно было убрать только height и выставить position и все встало на свои места

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	28.10.2020, 21:58 [ТС]
	актуально 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	29.10.2020, 10:48 [ТС]
	т.е. всегда нужно ограничивать высоту? А если мне нужно чтобы этот блок начинался с верху 300px и был всегда до низу экрана? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	29.10.2020, 11:32
	Высота должна ограничиваться вручную или автоматически. Если блок развернут на 100%, то что в нем прокручивать? 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	29.10.2020, 13:55 [ТС]
	Я другое имею ввиду. Блок должен ограничиваться нижним положением самого окна браузера. Т.е. оно может и свернуто быть и развернуто (окно), а соответственно сам блок с меню тоже принимает разные высоты. И само меню естественно больше чем блок. На скрине видно что скрол уходит далеко ниже. А нужно чтобы он завершался в низу окна где. А сейчас такое ощущение да это и так видно, что скрол уплывает за нижнюю границу вместе с меню 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	29.10.2020, 14:01 [ТС]
	В прикрепленном файле видно, что меню уходит далеко в низ за конец блока (который как раз ограничивается нижней точкой окна браузера) Красным помечено как должен появиться скроллинг Миниатюры 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	30.10.2020, 10:43 [ТС]
	ап+ 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	30.10.2020, 19:05 [ТС]
	А почему-то когда указываешь 100% то меню располагается с верха экрана до низу, а не занимает 100% блока в который входит меню. Где-то допустил косяк Добавлено через 3 минуты Сейчас попробовал. 100% не помогает 0

@gogolik Супер-модератор 3964 / 2082 / 832 Регистрация: 13.03.2010 Сообщений: 6,875
	30.10.2020, 19:40
	SMakcik, вам ответили, что 100% - не поможет и нужно ограничивать высоту. В тоннах вашего кода нет никакого желания разбираться, поэтому и нет дальнейших ответов. Выделите основное. 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	30.10.2020, 19:46 [ТС]
	Вы к сожалению не правы и подобных ответов не было. 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	31.10.2020, 19:35 [ТС]
	Еще разок что я хочу. Есть блок левого контента в котором будет располагаться шапка и само меню. Сам контейнер будет отображаться на 100% высоты экрана (как и отображается) Сам блок меню нначало 300px а низ должен ограничиваться нижнем положением окна браузера. Что и было показано на скрине Так понятно или еще что не понятно. Миниатюры 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	03.11.2020, 10:27 [ТС]
	ап+ 0

@SMakcik 0 / 0 / 0 Регистрация: 28.10.2020 Сообщений: 13
	03.11.2020, 15:47 [ТС]
	Спасибо за ответ. Проверил и сравнил. Оказалось нужно было убрать только height и выставить position и все встало на свои места 0

Как сделать скроллинг внутри бокса при раскрытии меню

Решение