Блок меню не сдвигает страницу вниз

@Saliery · Регистрация: 27.01.2013

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

Добрый день всем!

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

Пример на этой странице: https://foto-dorog.ru/trassa_a147.php

Как это можно исправить, подскажите, пожалуйста.

@novichek_1905 · 21.04.2019, 18:26

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

@Saliery · 21.04.2019, 20:20 **[ТС]**

novichek_1905, вы меня извините, но я уж совсем запутался

мне тут раньше советовали по этой теме: Элемент съезжает в зависимости от масштаба

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

не подскажете, как лучше поступить?

Добавлено через 34 минуты
точнее, пример характерно тут смотреть: https://foto-dorog.ru/trassa_a103.php

Добавлено через 10 минут
изначально было так:

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 class="bl1_r_g pa"> <!-- Общая часть верх. части правого 1-го блока -->
 
<div class="bl_r_verh pr bl_r_verh_1"> <!-- Верх. часть -->
 
<a href="trassi.php" class="r_bl_verh_txt pad trans" title="Оригинальные и очень интересные фотографии трасс России и зарубежья."> <!-- Заголовок верх. части -->
Трассы
</a> <!-- //Заголовок верх. части -->
 
</div> <!-- //Верх. часть -->
 
<div class="rasp_bl1_r_verh pr"></div> <!-- Заполнение пуст. места высотой 2px -->
 
<!-- Продолжение правого 1-го блока -->
 
<div class="bl_r_centr pr bl_r_centr_1"> <!-- Общая часть сред. и ниж. части -->
 
<div class="data_bl_r_centr_g pr"> <!-- Данные сред. части --> 
<a class="r_bl_centr_txt prd trans cancel_hvr" href="trassa_a7_latvija.php" title="Фотографии латвийской трассы А-7 [Е-67]">трасса м-3</a> 
<a class="r_bl_centr_txt prd trans cancel_hvr" href="trassa_a136.php" title="Фотографии трассы А-136">трасса м-1</a> 
<a class="r_bl_centr_txt prd trans cancel_hvr" href="trassa_m4_don.php" title="Фотографии трассы М-4 «Дон» [Е-115]">трасса м-4</a> 
</div> <!-- //Данные сред. части -->
 
<div class="bl_r_n pr bl_r_n_1"></div> <!-- Ниж. часть -->
 
</div> <!-- //Общая часть сред. и ниж. части -->
 
<!-- //Продолжение правого 1-го блока --> 
 
 
</div> <!-- //Общая часть верх. части правого 1-го блока -->

Добавлено через 2 минуты
но проблема была в том, что 2 и 3 части относительно 1 блока меню "трассы" смещались по left на 1px вправо, а когда масштаб делал меньше, то влево. В разных браузерах картина была разная.

потом мне в этой теме дали решение: Элемент съезжает в зависимости от масштаба

заработало, но само меню выпало из разметки

@mrtoxas · 21.04.2019, 21:41

Или скриптом узнавать высоту меню и делать такой же padding у какой-то обертки, или убирать абсолютное позиционирование у меню.

@Saliery · 21.04.2019, 22:01 **[ТС]**

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

убирать абсолютное позиционирование у меню

а в этом случае как тогда?

@mrtoxas · 21.04.2019, 22:17

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

@Saliery · 21.04.2019, 22:49 **[ТС]**

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

Я вообще не вижу причин использовать абсолютное

я не знаю, но мне тут посоветовали так делать: Позиционирование 2-х слоёв внутри 1-го родительского

есть другие варианты? давайте попробуем, я просто не очень разбираюсь в этом

Добавлено через 30 минут
может, таблицу туда впихнуть? ну я уже правда не знаю

@mrtoxas · 21.04.2019, 23:13

Разметка у вас, закачаешься. Лезть туда не особо кому-то захочется. Лучше вам придумать как выводить нормально элементы на страницу. Или начинайте читать про css-grid, grid-области, именованные grid-линии. Это поможет вам раскидать по странице последовательно идущие в разметке элементы. А сейчас, приблизительный скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
function seWrapperHeight(){
    var menuHeight = document.querySelector('.bl_r_centr_1').offsetHeight;
    var wrapper = document.querySelector('.bl2_g_centr');
    if(wrapper.offsetHeight < menuHeight){
       wrapper.style.height = menuHeight  + 'px' ;
    }
}
 
document.addEventListener("DOMContentLoaded", seWrapperHeight, false);

Но надо добавить id к .bl_r_centr_1 и .bl2_g_centr и указать эти id в скрипте.

@Saliery · 22.04.2019, 00:46 **[ТС]**

появилась другая идея, завтра попробую, отпишу

@Saliery · 22.04.2019, 19:14 **[ТС]**

получилось!

я в "g_r_blocks pr" засунул этот блок от начала и до конца, всё работает
margin-top у "g_r_blocks" сделал -93px
всё чётко

mrtoxas,
за код всё равно спасибо, он когда-нибудь, возможно, пригодится в другом случае

Добавлено через 35 секунд
Вообще, большое спасибо, что помогали!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@Saliery 9 / 9 / 4 Регистрация: 27.01.2013 Сообщений: 451

	Блок меню не сдвигает страницу вниз 21.04.2019, 17:02. Показов 1611. Ответов 9 Метки нет (Все метки) Добрый день всем! Стал добавлять в меню пункты, обнаружил, что блок меню не пинает вниз сайт, а как бы под сайт заходит, когда не хватило места. Пример на этой странице: https://foto-dorog.ru/trassa_a147.php Как это можно исправить, подскажите, пожалуйста. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	21.04.2019, 18:26
	Saliery, все правильно у вас работает, так как блок `bl1_r_g pa` у вас имеет абсолютное позиционирование, а значит он вырван из потока, вам нужно иначе сделать этот блок, применив один из вариантов расположения двух колонок, можно на флекс, флоат, или как угодно, но не так как сейчас. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	21.04.2019, 21:41
	Или скриптом узнавать высоту меню и делать такой же padding у какой-то обертки, или убирать абсолютное позиционирование у меню. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	21.04.2019, 22:17
	Без понятия. В том виде, в каком страница сейчас представлена, я мало что понять могу. Я вообще не вижу причин использовать абсолютное позиционирование ни в одном из блоков. Но если у вас с этим какие-то трудности, тогда можете скриптом расчитать. 1

@Saliery 9 / 9 / 4 Регистрация: 27.01.2013 Сообщений: 451
	22.04.2019, 00:46 [ТС]
	появилась другая идея, завтра попробую, отпишу 0

@Saliery 9 / 9 / 4 Регистрация: 27.01.2013 Сообщений: 451
	22.04.2019, 19:14 [ТС]
	получилось! я в "g_r_blocks pr" засунул этот блок от начала и до конца, всё работает margin-top у "g_r_blocks" сделал -93px всё чётко mrtoxas, за код всё равно спасибо, он когда-нибудь, возможно, пригодится в другом случае Добавлено через 35 секунд Вообще, большое спасибо, что помогали! 0