Скролл при уменьшении ширины

@axela002 · Регистрация: 12.03.2017

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

Привет друзья, такой вопрос, верстал тут сайтик, и появилась проблема, при уменьшении ширины экрана(браузера) появлялся горизонтальный скролл, и причем когда я скролил то не видная часть была белым и надписи и т.д выезжали туда тоже.. что это может быть?
Задавал контейнеру такие св-ва

CSS
1
2
3
4
.container {
width:1200px;
margin:0 auto;
}

ширина была фиксирована, может быть из-за этого?
или дело в контенте который был в этом контейнере

Добавлено через 5 минут
т.е я уменьшаю ширину экрана, появляется скролл, а сайт не адаптируется..т.е даже блоки не уезжают никуда, как должны.. тип сдвигаются и т.д..Это из-за фиксированной ширины элементов? и тут использовать media запросы надо?

@Пурыга Никита · 15.11.2018, 20:19

Привет. Да, это из-за фиксированной ширины.

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

CSS
1
2
3
4
.container {
width:100%;
margin:0 auto;
}

Так правильно. Если нужно не во всю ширину, тогда регулируй через margin.

Добавлено через 1 минуту
axela002, почитай про основы адаптивной верстки.

Не по теме:

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

@shsv382 · 16.11.2018, 22:51

1. Почитай про адаптивную верстку и медиа-запросы, без этого сейчас никуда
2. Естественно, это из-за фиксированной ширины
3. Бывает, что скролл появляется и без фиксированной ширины (когда переколдавал, и уже не знаешь, где), в таком случае

CSS
1
2
3
html, body { 
width: 100%; overflow-x: hidden;
}

@Пурыга Никита · 17.11.2018, 18:57

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

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

А что там можно переколдавать

margin, padding, box-sizing... не считая ширины, по моему это все, из-за чего может появиться скрол)

@shsv382 · 17.11.2018, 19:34

Можно, если у вас большой проект на каком-нибудь фреймворке, типа рельсов, вы беретесь его доделывать-переделывать после кого-то, фиксите что-то в одном месте, а в другом месте отваливается, или что-нибудь новое появляется...

@Пурыга Никита · 17.11.2018, 19:37

Я вообще для всего прописываю максимальную ширину в 100% и border-box. Проблем возникнуть не должно

@shsv382 · 17.11.2018, 19:39

CSS
1
2
3
4
* {
box-sizing: border-box;
max-width: 100%;
}

Это чтобы для всего отдельно не прописывать...

@Пурыга Никита · 17.11.2018, 19:41

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

Это чтобы для всего отдельно не прописывать...

Я это и имею ввиду

Не ужели вы думали, что я для каждого селектора копирую код

@shsv382 · 17.11.2018, 19:43

ну мало ли)))

@Пурыга Никита · 17.11.2018, 19:44

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

ну мало ли)))

Не по теме:

:D Все возможно :)

Новые блоги и статьи Все статьи Все блоги /
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 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	17.11.2018, 19:34
	Можно, если у вас большой проект на каком-нибудь фреймворке, типа рельсов, вы беретесь его доделывать-переделывать после кого-то, фиксите что-то в одном месте, а в другом месте отваливается, или что-нибудь новое появляется... 0

@Пурыга Никита 39 / 9 / 1 Регистрация: 16.02.2018 Сообщений: 251
	17.11.2018, 19:37
	Я вообще для всего прописываю максимальную ширину в 100% и border-box. Проблем возникнуть не должно 0

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	17.11.2018, 19:43
	ну мало ли))) 0