Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.72/18: Рейтинг темы: голосов - 18, средняя оценка - 4.72
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20

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

25.07.2015, 02:09. Показов 3827. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ребят, выручайте!
Целый день вожусь.. уже мозги кипят!
В общем суть такова:
Имеем фиксированный блок с лева, с вертикальным меню с подпунктами, в нём расположен блок сроллирующий содержимое фиксированного блока при заполнении по вертикали более чем на 100% экрана (вместо стандартного скроллбара использовал кастомный скрипт, если не ошибаюсь, называется "jscrollpane".. на винте откопал, так что с названием не уверен), собственно в скроллирующем блоке находится само меню с подпунктами... При открытии страницы с фиксированным блоком в браузере, всё пучком, т.е. если пунктов в меню достаточно много, для того чтобы меню вылезло за пределы блока, появляется скроллбар, и можно пролистать меню до последнего пункта, но стоит открыть какой-либо пункт (да бы увидеть подпункты), как последние (нижние) пункты меню уходят за пределы сроллируемой области и становятся недоступны.
Полагаю дело не в скрипте, потому как был момент, когда обновил страницу и, ву-а-ля, всё за работало, нижний пункт меню отталкивался от нижней границы скроллируемой области, и за её пределы не уезжал, как и должно быть, короче. Но стоило мне залезть в редактор, покопаться с кодом (вроде как ничего из отвечающего за скролл не трогал, но не уверен, так как к этому моменту, в башке уже каша образовалась), и опять двадцать пять.. - чё не делаю, а за границу всё-равно уезжает.

Вот код (HTML):

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
<div id="sidebar">
    <div id="jscrollpane">
        <ul class="tabs collapsible">
            <li><a href="#">Пункт 1</a>
                <ul class="dropdown">
                    <li><a href="">Подпункт 1</a></li>
                    <li><a href="">Подпункт 2</a></li>
                    <li><a href="">Подпункт 3</a></li>
                    <li><a href="">Подпункт 4</a></li>
                </ul>
            </li>
            <li><a href="#">Пункт 2</a>
                <ul class="dropdown">
                    <li><a href="">Подпункт 1</a></li>
                    <li><a href="">Подпункт 2</a></li>
                    <li><a href="">Подпункт 3</a></li>
                    <li><a href="">Подпункт 4</a></li>
                </ul>
            </li>
            <li><a href="#">Пункт 3</a>
                <ul class="dropdown">
                    <li><a href="">Подпункт 1</a></li>
                    <li><a href="">Подпункт 2</a></li>
                    <li><a href="">Подпункт 3</a></li>
                    <li><a href="">Подпункт 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
Скроллбар вызывается с помощью маленького скрипта, расположенного до </head>

JavaScript
1
2
3
4
5
<script type="text/javascript">
    $(function(){
        $('#jscrollpane').jScrollPane();
    });
</script>
Вот код (CSS):

CSS
1
2
3
4
5
6
7
8
9
10
11
#sidebar {
position: fixed;
top: 45px;
left:0;
bottom: 0;
width: 240px;
background:#333;}
 
#jscrollpane{
width: 240px;
height: 100%;}
Буду крайне благодарен, тем кто даст дельный совет!!!
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
25.07.2015, 02:09
Ответы с готовыми решениями:

Таблица уезжает за пределы экрана
Добрый день! Очень нужна помощь верстальщика. Бэкграунд: Для генерирования PDF из веб-приложения используется библиотека tcpdf...

Раскрывающееся меню - при открытии/закрытии вложенного меню закрывается все меню
Проблема во вложенном меню. При открытии/закрытии вложенного меню закрывается все меню. Надо, чтобы главное меню не реагировало на клики во...

Уменьшение верхнего фиксированного меню при прокрутке вниз
Подскажите, как реализовать, чтобы верхнее меню на сайте становилось меньше при прокрутке сайта вниз? То, что нужно зафиксировать его -...

10
 Аватар для Sn1p3rOk
288 / 175 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
25.07.2015, 02:19
Неплохо было бы приложить скриншот и залить в песочницу код, либо приложить библиотеки для jscrollpanel.
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
25.07.2015, 03:09  [ТС]
По поводу скриншота и библиотек, сейчас сделаю..
По поводу
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
залить в песочницу код
.. поясните если несложно..

Добавлено через 45 минут
На фото ниже, скроллбар опущен, меню закрыто и нормально отображается:


На следующем фото, косяк.. скроллбар опущен, открыт последний пункт меню, а из подпунктов отображается только первый, остальные ушли за пределы скроллируемой области:


Библиотеки: jscrollpanel.rar
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
28.07.2015, 05:56  [ТС]
Але, народ.. - ну что, желающих помочь советом нет что ли?

Добавлено через 2 минуты
Да, кстати, дело точно не в скрипте.. проверил при нём отключённом, - с дефолтным скроллом тоже самое, так что капать в направлении стилей надо...
0
 Аватар для Sn1p3rOk
288 / 175 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
28.07.2015, 19:43
Цитата Сообщение от Dimaxgen Посмотреть сообщение
Але, народ.. - ну что, желающих помочь советом нет что ли?
Скиньте весь код архивом вместе со стилями.
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
30.07.2015, 10:40  [ТС]
Скинул.
Кстати, дружище, не сочти за наглость, глянь мельком, может ты сможешь сообразить... у меня к
Code
1
textarea
подключён CodeMirror (подсветка синтаксиса), пытаюсь осуществить перенос строки, не выходит что то, может у тебя сообразить получится (я не настаиваю).
Вложения
Тип файла: rar demka.rar (412.9 Кб, 6 просмотров)
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
31.07.2015, 16:43  [ТС]
Цитата Сообщение от Dimaxgen Посмотреть сообщение
Кстати, дружище, не сочти за наглость, глянь мельком, может ты сможешь сообразить... у меня к
1
textarea
подключён CodeMirror (подсветка синтаксиса), пытаюсь осуществить перенос строки, не выходит что то, может у тебя сообразить получится (я не настаиваю).
С переносом разобрался.. из "висяков" сроллируемая область сайдбара только осталась...
0
 Аватар для Sn1p3rOk
288 / 175 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
01.08.2015, 02:56
Dimaxgen, После запуска прописываются некоторые стили.
Миниатюры
При открытии, вертикальное меню уезжает за пределы фиксированного блока, в котором находится  
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
01.08.2015, 06:14  [ТС]
Не выходит.. стоит классу jspContainer присвоить фиксированную высоту, как скроллбар вообще исчезает...
Да и фиксированная высота в моём случае, совсем не то что нужно, мне нужно чтобы высота менялась в зависимости от высоты видимой на экране области...

Добавлено через 1 час 38 минут
Всё народ, вопрос решён, тема закрыта...
Дело было всё-таки в скрипте.. вызов скроллбара иначе нужно было осуществлять..
0
 Аватар для Sn1p3rOk
288 / 175 / 86
Регистрация: 19.04.2014
Сообщений: 1,095
01.08.2015, 13:37
Цитата Сообщение от Dimaxgen Посмотреть сообщение
Не выходит..
Я не говорил чтобы ты присваивал фиксированную высоту, я показывал вам, что она присваивается после открытия в браузере.
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
16.08.2015, 03:51  [ТС]
Sn1p3rOk, извини, не сразу допетрил..
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
16.08.2015, 03:51
Помогаю со студенческими работами здесь

Подпрыгивают элементы фиксированного меню при нажатии (ссылка якорь)
Добрый вечер! Помогите разобраться. Раньше всё настроено было хорошо, всё работало, не заметила в какой момент всё пошло не так. Стали...

Текст вылазит за пределы блока при масштабтровании
Здравствуйте! У меня есть три блока, которые я расположил в одной строке. В каждом блоке есть теги &lt;h2&gt; и &lt;p&gt; разной высоты....

Вертикальное меню с выпадающим сбоку дивом при наведении
Здравствуйте, как реализовать вертикальное меню с выподающим окном дивом, чтобы наводя на каждую из ссылок выпадал див возле ссылки , на её...

При изменении масштаб текст выходит за пределы блока
Вот есть три дива меню текст по центру и фотка!! При увиличении зума браузере текст тот что по центру(div class=text) вылазит на меню и...

Resize блока при открытии страницы
подскажите как заставить этот скрипт работать при загрузке страницы, а не только когда дернуть размер окна браузера ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
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
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru