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

Убрать горизонтальную полосу прокрутки, оставив изображение за экраном

01.04.2015, 15:09. Показов 3697. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день!

Подскажите как сделать, таким образом что бы при разрешении 1024*768 не появлялась горизонтальная полоса прокрутки?

Вот как в макете, минимальная ширина экрана в пикселях 980


Структура блока выглядит так
HTML5
1
2
3
4
5
6
7
8
<section class="feedback">
    <div class="WrappFeed">
        <div class="forma">
            ***
        </div>
        <div class="girl"></div>
    </div>
</section>
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
.feedback {
  min-height: 530px;
  background: #fff;
}
.WrappFeed {
  width: 980px;
  margin: 0 auto;
  padding-top: 21px;
  position: relative;
}
.forma{
    width:594px;
    height:458px;
    background: #f4f4f4; 
}
.girl {
  position: absolute;
  right: -99px;
  top: -75px;
  background: url(images/girl.png);
  width: 567px;
  height: 605px;
  z-index: 1;
}
Картинка выступает вправо за экран, и вверх, на предыдущий блок

0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.04.2015, 15:09
Ответы с готовыми решениями:

Убрать горизонтальную полосу прокрутки
Появилась горизонтальная прокрутка... не могу понять от куда вылезла))) CSS: .wrapper { width: 100%; max-width: 1500px; margin: 0...

Как убрать горизонтальную полосу прокрутки?
&lt;html&gt; &lt;head&gt; &lt;title&gt;Мой сайт&lt;/title&gt; &lt;style&gt; div{ margin:0; padding:0; } &lt;/style&gt; ...

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

9
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
01.04.2015, 15:17
Js_Skriptor, Пробуйте
CSS
1
2
3
html{
overflow-x:hidden;
}
0
3 / 3 / 0
Регистрация: 06.06.2014
Сообщений: 68
01.04.2015, 15:26  [ТС]
Давран, Таким образом полоса прокрутки исчезает, но сама прокрутка остается.
Нужно именно сделать так, что бы не было возможности прокрутить вправо.
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
01.04.2015, 15:29
Цитата Сообщение от Js_Skriptor Посмотреть сообщение
Таким образом полоса прокрутки исчезает, но сама прокрутка остается
что то не так. как вы прокрутите без полосы прокрутки? может min-width еще нужно?
0
3 / 3 / 0
Регистрация: 06.06.2014
Сообщений: 68
01.04.2015, 15:37  [ТС]
Давран, да действительно... просто изменил стили в браузере - не помогло... записал в файл стилей - все отлично.

Спасибо.
0
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 15:59
А что случиться, если разрешение будет меньше 960? на кнопку поиска не нажать уже будет? Она спрячется за край браузера, а скролла нет.
0
3 / 3 / 0
Регистрация: 06.06.2014
Сообщений: 68
01.04.2015, 16:05  [ТС]
Xteda, пробовал экран с меньшим разрешением, эмуляция в crome. Отображается нормально, тело страницы двигается нормально
0
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 16:09
Не понимаю, как это может быть: вы запрещаете прокрутку html, и что-то у вас куда-то двигается. И зачем эмуляция - достаточно просто ресайзить браузер
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
01.04.2015, 18:36
Цитата Сообщение от Xteda Посмотреть сообщение
разрешение будет меньше 960?
добавьте min-width:960px;
и у странице появится скролл если ширина меньше чем 960
0
3 / 3 / 0
Регистрация: 06.06.2014
Сообщений: 68
03.04.2015, 14:50  [ТС]
Цитата Сообщение от Давран Посмотреть сообщение
Сообщение от Xteda
разрешение будет меньше 960?


добавьте min-width:960px;
и у странице появится скролл если ширина меньше чем 960
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.04.2015, 14:50
Помогаю со студенческими работами здесь

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

Как сделать горизонтальную полосу прокрутки?
Подскажите, пожалуйста, как сделать так чтобы горизонтальная полоса прокрутки появлялась только начиная с определенной ширины экрана? Я...

Убрать горизонтальную полосу прокрутки в DbGrid
как убрать горизонтальную прокрутку в DBGrid? Добавлено через 9 минут тему можно закрыть, разобрался сам

Как убрать горизонтальную полосу прокрутки в ListView
Как убрать горизонтальную полосу прокрутки в ListView?

ListBox, добавить горизонтальную полосу прокрутки
подскажите как сделать в ListBox горизонтальные полосы прокрутки


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
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 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru