Блок выходит за границы экрана при уменьшении экрана (overflow не помогает)
github pages репозиторий При уменьшении экрана блок .gallery выходит за границы экрана. Overflow для html и body не помогает (может не туда писал, но обычно помогал) Другими словами — появляется горизонтальная полоса прокрутки.
Отслеживать
задан 27 ноя 2020 в 16:04
152 4 4 серебряных знака 15 15 бронзовых знаков
А что именно вы хотите?
27 ноя 2020 в 16:09
@DiD Нужно, чтобы не появлялась горизонтальная полоса прокрутки при уменьшении экрана. То есть, чтобы до экрана в ширину 500px этот блок (.gallery) уменьшался. Я пробовал добавлять для .gallery, .container_gallery и для .group_img a — width: с разными процентами; Возможно получится для самих имг задавать разный width при определённой ширине, но придётся очень много писать top и left для .group_img a.
27 ноя 2020 в 16:14
Кстати говоря, на body overflow: hidden у вас как ра и не прописан, зато прописан на html (что бесполезно, так как за границу тега html может попасть только сам body)
27 ноя 2020 в 16:24
попробуйте предложенный мной скрипт. Прямо ничего не меняя копируя-вставляя. Вы можете вставить этот код без в консоли браузера без непосредственных изменений на сайте. Отпишите по результатам.
Как в Windows 10 настроить рабочий стол, если он выходит за рамки монитора
Windows 10 – это универсальная ОС, которая легко адаптируется под любые сборки компьютера. Причем относится это не только к аппаратным комплектующим, напрямую подключенным к материнской плате, но и к установленному монитору. К примеру, Винда будет корректно отображаться как на лэптопе с диагональю 14 дюймов, так и на экране на 21 дюйм. Однако иногда это масштабирование работает неправильно, и рабочий стол Windows 10 начинает выходить за рамки монитора.
Ручное изменение разрешения экрана
На деле возникшая проблема объясняется только одной причиной – несоответствие заданных настроек и действительного размера дисплея. Увы, решить это двумя кликами не всегда получается, ведь размеры и пропорции регулируются сразу в нескольких разделах настроек, которые никак не связаны между собой. Для настройки экрана вручную следуйте инструкциям ниже:
- Откройте рабочий стол. Для этого зажмите сочетание клавиш «Win» + «M».
- Кликните ПКМ по свободному месту и в открывшемся контекстном меню выберите пункт «Параметры экрана».
- Найдите параметр «Разрешение» и измените его значение.
Чтобы не гадать с размерами, предлагаем заранее узнать разрешение экрана, а после ориентироваться по данным ниже.
| Диагональ | Разрешение |
| Обычный, 13-15” | 1400 X 1050 |
| Широкий, 13-15” | 1280 X 800 |
| Широкий, 17” | 1680 X 1050 |
| Обычный, 19” | 1280 X 1024 |
| Обычный, 20” | 1600 X 1200 |
| Широкий, 20-22” | 1680 X 1050 |
| Широкий, 24” | 1920 X 1200 |
Настройки будут применены автоматически, но после этого появится окно, в котором необходимо подтвердить изменения. Если этого сделать, то через 20 секунд экран вернется в исходное состояние.
Установка графических драйверов
Этот метод будет более практичным, если не нашлось нужного формата в методе выше, либо если настройки постоянно «слетают» через время.
- Откройте «Диспетчер устройств». Для этого откройте окно «Выполнить» сочетанием клавиш «Win» + «R» и введите команду «devmgmt.msc».
- В разделе «Видеоадаптеры» найдите устройство с названием вашей видеокарты.
- Кликните ПКМ и выберите «Обновить драйвер». Выберите поиск через интернет.
- Узнайте серию видеокарты и версию ОС.
- Откройте официальный сайт производителя видеоадаптера.
- Укажите запрашиваемые данные. Сайт в автоматическом режиме подберет нужный драйвер.
- Установите его как обычную программу.
Для большей надежности перезагрузите компьютер.
Отключение автоматической установки устройств
Даже если все починилось после правильной настройки, через некоторое время установленные размеры могут снова сбиться. Это происходит из-за автоматической установки, когда ОС самостоятельно обновляет драйвер на неподходящий. Метод решения проблемы:
- Откройте панель управления. Для этого зажмите сочетание клавиш «Win» + «R» и введите команду «control panel».
- Перейдите в раздел «Оборудование и звук», а после – в подраздел «Устройства и принтеры».
- Кликните ПКМ по названию вашего устройства (обычно первое в подразделе «Устройства») и выберите «Параметры установки устройств».
- В открывшемся окне установите переключатель напротив пункта «Нет».
Подтверждаем действия вводом пароля администратора. Метод довольно рисковый, особенно если вы часто подключаете сторонние устройства. Если какие-то устройства стали отключаться, то верните настройки в исходное состояние.
Проверка настроек дисплея
Windows способна поддерживать сразу несколько профилей дисплея, а также проецировать картинку на несколько экранов сразу. Довольно часто сбой в профиле или проецировании приводит к некорректному отображению на одном из дисплеев.
Простейшее решение – это отключение проекции. Для этого зажмите сочетание клавиш «Win» + «P» и с помощью стрелок переключитесь на «Только экран компьютера». Возможно, система распознает текущий экран вторым, а не первым. В таком случае нужно снова нажать «Win» + «P» и выбрать «Только второй экран».
Настройка масштабирования в панели управления видеокартой
Как мы и говорили выше, настраивать отображение можно как через возможности ОС, так и через параметры видеоадаптера. Для этого откройте рабочий стол, кликните ПКМ по свободной области и выберите пункт «Панель управления *Название производителя видеокарты*». В открывшемся меню доступны настройки:
- Масштабирования.
- Разрешения.
- Размера элементов.
Отрегулируйте эти параметры до тех пор, пока не получите нужный результат. Примечательно, что работает этот метод только на компьютерах с дискретной видеокартой.
Настройка экрана через меню монитора
Если не получилось объяснить Винде нужные настройки, то можно решить проблему от обратного, то есть настроить монитор под систему. Этот метод работает только на персональных компьютерах с отдельным монитором или моноблоках, где есть функциональные кнопки. На ноутбуке такой функционал встречается редко.
Для каждого монитора есть отдельная инструкция. Но, если вкратце, вам необходимо найти кнопку автоматического выравнивания. Например, на некоторых мониторах LG достаточно дважды нажать первую функциональную клавишу. О начале настройки сообщит двигающаяся картинка на экране.
Окно за пределами экрана в Windows — как вернуть программу на экран
Многие пользователи сталкивались с тем, что программа по той или иной причине вышла за пределы экрана, а возможности вернуть окно на рабочий стол к его центру не видно: мышью схватиться не за что, а контекстное меню в панели задач показывает не те действия, которые нужны. В этой простой инструкции для начинающих подробно о том, как именно вернуть окно программы из-за границ экрана если оно случайно оказалось там и мышью этого сделать не получается.
Примечание: если у вас все окна выходят за границы экрана и, более того, туда же перемещается указатель мыши, причиной этого могут быть: неверно выставленное разрешение экрана (установите рекомендуемое разрешение) либо подключенный второй монитор, ТВ или проектор — даже если он выключен, отключите кабель от него или отключите отображение на втором экране в параметрах экрана Windows.
- Как вытащить окно из-за пределов экрана в панели задач
- Программа для размещения окна по центру рабочего стола
- Видео инструкция
Как вернуть окно из-за границ экрана в Windows 10, 8.1 и Windows 7 с помощью панели задач
Значки запущенных вами программ как правило отображаются в панели задач Windows 10, 8.1 и Windows 7 (по умолчанию находится внизу рабочего стола), именно они помогут нам переместить окно в нужное расположение:
- Если нажать по значку запущенной программы правой кнопкой мыши, удерживая клавишу Shift, откроется меню, из которого вы можете выполнить один из следующих шагов на выбор.
- Выбрать пункт «Развернуть» (если пункт недоступен, используйте следующий метод): в итоге оно откроется на весь экран. Затем развернутое приложение вы можете перетащить мышью как обычно «схватив» его за строку заголовка.
- В том же меню вы можете выбрать пункт «Переместить». При этом указатель мыши изменится на значок перемещения. Если вы не можете переместить окно мышью с помощью этого указателя (причем это можно сделать за любую его часть), сделайте это с помощью стрелок на клавиатуре — в режиме «Переместить» они будут работать. Более того, после первого нажатия стрелок окно будет «прилеплено» к указателю мыши и его можно будет перемещать мышкой без нажатия кнопок, а нажатие «отпустит» окно.
Еще один способ с помощью встроенных средств Windows — нажать правой кнопкой мыши по пустому месту панели задач и выбрать из контекстного меню пункт «Расположить окна каскадом», «Расположить окна стопкой» или другой пункт, связанный с расположением окон на рабочем столе (сработает только для развернутых окон).
Простая утилита для быстрого размещения окна по центру экрана
После запуска программы вы можете включить в ней две опции: автоматическое размещение новых окон по центру экрана и автоматическое помещение окна в центр экрана при тройном нажатии клавиши Shift. Оба пункта исправно работают и каких-то проблем не возникает.
Видео инструкция
Надеюсь, материал для кого-то из начинающих пользователей оказался полезным.
А вдруг и это будет интересно:
- Лучшие бесплатные программы для Windows
- Лучшие редакторы контекстного меню для Windows
- Дополнительные возможности в Windows 11 OOBE при установке
- Ошибка 0x80070522 Клиент не обладает требуемыми правами — как исправить?
- Компьютер не включается или черный экран после установки оперативной памяти
- Автоматическая установка нескольких программ в Windows 11 и 10
- Windows 11
- Windows 10
- Android
- Загрузочная флешка
- Лечение вирусов
- Восстановление данных
- Установка с флешки
- Настройка роутера
- Всё про Windows
- В контакте
- Одноклассники
-
Peveksky 17.02.2020 в 09:29
- Dmitry 19.02.2020 в 14:35
Как сделать плавающий блок, чтобы он не выходил за границы экрана?
Подскажите пожалуйста, как сделать так, чтобы блок не выходил за пределы экрана?
Пример
В данном случае блок при уменьшении экрана отталкивается от края, а в моём просто выходит за пределы. Подскажите, как это можно исправить?
- Вопрос задан более двух лет назад
- 1264 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Никита Траторов @NikitaTratorov
- Если у него абсолютное позиционирование относительно body, можно указать right: 0
- Второй вариант, вложить его в прозрачный div, растянутый на весь viewport с position: relative , тогда дочерний элемент не полезет наружу.
- JavaScript. Вероятнее всего, на сайте со скриншота именно JS. Кстати, Popover в Bootstrap умеет подыскивать себе удобное местоположение, не уходя за границы экрана
Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать
В приведенном примере используется JS (вероятней всего какой-то плагин для поповера).
На странице есть родительский блок для всплывашки, спозиционированный абсолютно от body, при наведении на ссылку внутри этого блока генерируется разметка всплывашки, а ее позиционирование рассчитывается относительно точки наведения.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
Как указать картинку для закладок браузера?
- 1 подписчик
- 5 часов назад
- 20 просмотров
- HTML
- +1 ещё
Как написать стили для блоков, что прилипают к разным сторонам контейнера?
- 1 подписчик
- 11 часов назад
- 40 просмотров