Как убрать полосы прокрутки? » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 21 февраль 2025, 08:11
Браузерных «Героев Меча и Магии III» прокачали до версии 3.5 — появилась поддержка дополнения «Во Имя Богов» - «Новости сети»
  • 21 февраль 2025, 08:11
Браузерных «Героев Меча и Магии III» прокачали до версии 3.5 — появилась поддержка дополнения «Во Имя Богов» - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       005f1294
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
16-03-2016, 14:24
Как убрать полосы прокрутки?
Рейтинг:
Категория: Самоучитель CSS / Вёрстка
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!

Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
			<html>
			 <head>
			  <meta charset="utf-8">
			  <title>Полосы прокрутки</title>
			  <style>
			   html { overflow:  hidden; }
			   div { height:  2000px; }
			  </style>
			 </head>
			 <body>
			  <div>Бла-бла</div>
			 </body>
			</html>

В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
			<html>
			 <head>
			  <meta charset="utf-8">
			  <title>Полосы прокрутки</title>
			  <style>
			   html { overflow-x: hidden; }
			   div { 
			    min-width:  800px; /* Минимальная  ширина */
			    background: #fc0;  /* Цвет фона */
			    padding: 10px;  /* Поля вокруг текста */
			   }
			  </style>
			 </head>
			 <body>
			  <div>Бла-бла</div>
			 </body>
			</html>

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.


Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0 1.0 6.0 1.0 1.0 1.0 1.0 Задача Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы. Решение Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали! Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1. Пример 1. Страница без полос прокрутки HTML5 CSS2.1 IE Cr Op Sa Fx В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента. Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются. Пример 2. Нет горизонтальной полосы прокрутки HTML5 CSS3 IE Cr Op Sa Fx Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Просмотров: 3 781
Комментариев: 0:   16-03-2016, 14:24
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР