Подогнать ширину под размер текста
Использую —width: 140px; фиксированную ширину. Подогнала под большой текст, но если текст маленький, смотрится не очень Как можно задать ширину в зависимости от длины текста ? Возможно ли расчитать длину текста ?
.toggle < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; --width: 140px; --height: calc(var(--width) / 4); position: relative; display: inline-block; width: var(--width); height: var(--height); border-radius: var(--height); cursor: pointer; >.toggle input < display: none; >.toggle .slider < position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--height); background-color: #dee0e3; transition: all 0.4s ease-in-out; >.toggle .slider::before < content: ''; position: absolute; top: 0; left: 0; width: calc(var(--height)); height: calc(var(--height)); border-radius: calc(var(--height) / 2); background-color: green; transition: all 0.4s ease-in-out; >#btn1 input:checked+.slider < background-color: lightblue; >#btn2 input:checked+.slider < background-color: pink; >.toggle input:checked+.slider::before < transform: translateX(calc(var(--width) - var(--height))); >.toggle .labels < position: absolute; top: 8px; left: 0; width: 100%; height: 100%; font-size: 12px; font-family: sans-serif; transition: all 0.4s ease-in-out; >.toggle .labels::after < content: attr(data-off); position: absolute; right: 5px; color: black; opacity: 1; transition: all 0.4s ease-in-out; >.toggle .labels::before < content: attr(data-on); position: absolute; left: 5px; color: black; opacity: 0; transition: all 0.4s ease-in-out; >.toggle input:checked~.labels::after < opacity: 0; >.toggle input:checked~.labels::before
если невозомжно расчитать размер текста, то как бы вы поступили, чтоб уменьшить размер фиксированно, для второй кнопки ?
Как задать ширину параграфа в css
Grid-template-columns — минимальная ширина + максимальная + ширина в процентах
Как сделать так, чтобы на колонку выставить ширину в процентах и при этом указать максимальную и.
Не отображается стиль абзаца
Почему-то мой "р" с classом "titles" не влияет на HTML. <div .
Фото по центру абзаца
<p><img alt="Коммутатор неуправляемый" title="Коммутатор неуправляемый".
Класс абзаца с необязательной информацией
Здравствуйте Уважаемые форумчане. Кто знает как можно в html и в css описать класс абзаца с.
Как задать длину параграфа в CSS, чтобы она определялась его содержимым?
И ожидаю получить что-то в таком духе (окрашенные буквы):
А получается вот так (фон растягивается на всю длину экрана):
Вопрос: что я делаю неправильно, и как мне получить то, что требуется? Мне надо, чтобы окрашивался только текст, а не вся строка.
Размеры элемента.
Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.
Все элементы (теги) можно разделить на две категории: Блочные и строковые.
Чем они отличаются?
Думаю, сами названия уже говорят о различиях. Блочные или боксовые элементы — это контейнеры, прямоугольные области на мониторе компьютера которым без труда и вело-изобретательства можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по её базовой линии и как правило служат для форматирования и редакции текста.
Основные отличия от элементов строкового и блочного типа заключаются в том что:
Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.
Боксовые элементы, по умолчанию, располагаются относительно друг друга вертикально, т.е. в начале и конце блока происходит «перенос строки», а строковые элементы располагаются горизонтально, перенос строки происходит только в том случае если это необходимо.
По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.
Думаю, на примере будет понятнее.
Ширина и высота блочных элементов.
Свойства CSS width и height — устанавливают ширину и высоту блочных элементов. Ширина и высота элемента может быть задана следующими способами:
- auto — Размеры элемента определяется его содержанием. (по умолчанию)
- % — Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
- px — Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.
Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание «выползет» за пределы элемента.
Управление содержанием элемента.
Что делать с содержанием элемента, если оно превышает его размер?
Если элементу присвоены точные значения высоты и ширины ( height, width ) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow , который указывает браузеру, что делать с элементом в таких случаях.
Свойство overflow может иметь следующие значения:
- visible — Элемент растягивается до необходимых размеров. (по умолчанию)
- hidden — Содержание элемента «обрезается» видна лишь та его часть что помещается в элементе.
- scroll — Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
- auto — Полосы прокрутки добавляются при необходимости.
Минимальные и максимальные размеры элемента.
Так как размеры элемента по умолчанию регулируются исключительно вложенным в него содержанием, текстом, графикой.. и т.д. то элементы становятся, вернее, остаются «резиновыми» и это хорошо! Но хорошо не во всех случаях.. иногда требуется ограничить эту «резиновость» конкретными размерами. Например, указать ячейке таблицы, что ты мол, независимо от твоего содержания, можешь быть по высоте не менее 50 пикселей, но и не более 200 пикселей.. определить, так сказать, диапазон её высоты или ширины.
Ниже перечисленные свойства CSS позволяют определить минимальные и максимальные размеры того или иного элемента
- max-height — максимальная высота элемента
- max-width — максимальная ширина элемента
- min -height — минимальная высота элемента
- min-width — минимальная ширина элемента
Эти свойства CSS, в свою очередь, могут выражаться в пикселях, процентах от размеров родительского элемента и none — без ограничений.
Полезные советы:
Как Вы уже поняли не все браузеры одинаково интерпретируют как HTML теги, так и свойства CSS. Особым «невежеством» по отношению как к пользователям так и к веб дизайнерам отличился Internet Explorer 6 и его более ранние версии.. Впрочем, и в остальных браузерах далеко не всё проходит гладко. Отсюда необходимо сделать вывод, что прежде чем выкладывать ту или иную страницу в Интернет её необходимо просмотреть (протестировать) в различных браузерах и их версий. А совет заключается собственно в том, что хорошо бы было их иметь под рукой — в установленном виде на Вашем компьютере. Соберите свою «коллекцию» браузеров.
Свойства для задания размеров и отступов
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее.
Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display , которое определяет тип элемента (блочный, строчный и другие).
В этом задании мы познакомимся с некоторыми свойствами из блочной модели, а более подробно и полно они будут рассмотрены в части «Блочная модель документа».
Записывайтесь на трансляцию 26 апреля в 13:00
- index.html Сплит-режим
- style.css Сплит-режим
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
- Добавьте в CSS-правило для класса p-first свойство margin-left: 50px; .
- В CSS-правило для класса p-second свойство padding: 20px; .
- В CSS-правило для класса p-third свойство width: 50%; .
Используемые свойства детально разобраны в курсе «Блочная модель документа».
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
Похожие публикации:
- Как выстроить блоки в ряд css
- Как для кнопки добавить галочку css
- Как убрать отступы у блока в css
- Как убрать рамку в css
Height, width и overflow — CSS правила для описания области контента при блочной верстке
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).
В предпоследней статье справочника мы рассмотрели с вами несколько основополагающих правил, которые используются в блочной верстке: margin (взаимодействие с границами соседних элементов), border (рамка) и padding (расстояние от рамки до области с контентом). В той статье мы не рассмотрели только то, какими правилами описывается содержимое, что сейчас и попробуем исправить.
Height и width — размеры области с контентом в CSS
Для этого в языке стилевой разметки CSS предусмотрены правила описывающие ширину (width) и высоту (height) этой самой области. Ширина будет определяться размером контейнера, т.е. того пространства, в котором стоят Html элементы. Как только мы ее изменяем, то содержимое подстраивается под эту ширину. А вот ее высота зависит от его содержания.
Т.е., добавив немного содержимого, вы тем самым увеличите высоту контейнера с ним, а если уменьшите размер контента, то, соответственно, уменьшится высота. Ширина же области с содержимым будет целиком и полностью зависеть от широты контейнера, в котором контент заключен. Отсюда делаем вывод, что ширина содержимого является внешним фактором, а вот его высота — внутренним.
Правила, которые регулируют данные размеры, называются width и height. Напомню, что они не обрезают изображение физически, поэтому предварительно нужно будет уменьшить размер фотографий (сжать их) и уже только потом загружать на сайт. У этих правил по умолчанию используется значение Auto (самостоятельный расчет — отдается на усмотрение браузера).
Т.о. абсолютно для всех тэгов, если значения width и height не заданы в явном виде, они будут рассчитываться браузером автоматически, начиная с самого внешнего элемента.
Ну, а кроме Auto значениями для них могут служить величины в размерах используемых в CSS или же проценты (про особенности использования процентов читайте чуть ниже):
Самым внешним элементом является тег Html, для которого допустимая ширина контента равна области просмотра (размеру видимой части экрана). Дальше браузер будет рассчитывать width для тэга body и так далее, вплоть до нужного нам элемента. В итоге получается, что ширина элемента будет подстраиваться под доступную ему (не занятую другими элементами) область и занимать ее целиком.
По этой самой причине все блочные элементы (читайте про них подробнее в статье про CSS правило display block), для которых не задано в явном виде значение width, будут стараться занять все доступное им место по ширине, а при изменении области просмотра (например, уменьшения окна браузера) горизонтальные размеры блочных элементов тоже будет изменяться соответствующим образом.
Кстати говоря, имеет смысл задавать height и width только для блочных тегов, ибо для строк их задание никакого смысла не имеет и браузером этот код отрабатываться не будет.
Но в то же время, если мы жестко зададим width для блочного элемента (например, абзаца заключенного в контейнер DIV), а широту внешнего контейнера не будем явно указывать (браузер тогда будет для него использовать умолчательное значение Auto), то при уменьшении области просмотра (окна обозревателя) может получиться так, что абзац вылезет за размеры контейнера Div, в котором он был заключен:
Это лишний раз подтверждает, что широта области контента является внешней величиной, никак не связанной с размером контейнера, в котором это самое содержимое заключено (запросто может вылезать за его пределы). А вот с высотой, которая задается через height, такой фокус уже не пройдет. Если мы увеличим высоту параграфа, то автоматически увеличится и высота контейнера Div, в котором он заключен.
Но кроме всего вышеописанного возможен такой вариант, что вы зададите жестко область с содержимым (например, width и height для параграфа), но содержимое при этом в эти размеры не впишется (текста в параграфе, допустим, окажется больше). Вот как раз для разруливания похожих ситуаций и было придумано CSS правило overflow.
Overflow — скрытие (hidden, visible) или прокрутка (scroll, auto)
Давайте для наглядности рассмотрим два абзаца идущих друг за другом в Html коде. Для наглядности подсветим области, отведенные под низ, разным цветом с помощью background:
Текст первого абзаца
Текст второго
Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.
Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):
Текст первого
Текст второго
В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.
Но давайте теперь ограничим и высоту контейнера с помощью height:15px.
В результате мы получили, что текст в наш маленький контейнер абзаца уже не влазит и поэтому он благополучно наехал на область своего соседа. Вот именно для управления поведением контента в подобных ситуациях и служит правило overflow.
Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.
У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать):
Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden. Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:
Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали атрибуты Html тега Frame). Итак, scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:
Но гораздо более логичным будет использование значения Auto для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.
Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:
Текст первого
Текст второго
Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).
Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).
Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.
Height и width в процентах — зачем нужен doctype
Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.
Несколько запутаннее обстоит дело с высотой области контента заданной в процентах. Было бы логично предположить, что аналогично — от высоты контейнера. Но тут мы с вами начинаем сталкиваться с дуализмом (двумя моделями поведения) — как делали раньше и как делают сейчас по принятым стандартам. В связи с этим следует еще раз затронуть тему режимов отображения и рассмотренную нами ранее декларацию doctype.
Исторически так сложилось, что после принятия стандартов оставалось все равно большое количество документов, сформированных по старым правилам чистого языка Html и с ними нужно было что-то делать. В то же время стандарт языка Html тоже развивался (выделился язык стилевой разметки и устарели некоторые теги и атрибуты), поэтому понадобилось каким-то образом показать браузеру, по каким именно стандартам нужно будет ему разбирать данный код.
Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.
Выглядеть она может по-разному (читайте об этом подробнее в упомянутой чуть выше статье), но завсегда будет работать такой вариант:
Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode). Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок (quirks mode).
Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.
Вот только понятие старины очень разное. Какая, например, старина может быть у популярного сейчас обозревателя Google Chrome, который появился-то только в 2008 году? У IE, естественно, история есть и довольно богатая. Поэтому все браузеры любой версии будут отображать документ без декларации (в режиме quirks mode или уловок) точно так же, как это бы делал старинный IE 5.5, ибо именно эта версия считается базовой.
Почему я так долго говорил про режимы отображения браузеров? А потому, что для этих двух режимов задание высоты (height) области контента в процентах очень сильно отличается по отношению к расчету этой самой высоты.
Задание высоты (в процентах) области с контентом в режиме следования стандартов (standarts mode — когда прописан правильный doctype в начале документа) будет вообще не возможно, если не будет где-либо задана высота для контейнера, в который заключено это содержимое (заданная вами в процентах высота будет игнорироваться).
Содержание
Если декларацию doctype из кода документа убрать, то мы увидим следующую картину:
Для режима следования стандартам (в начале документа прописана декларация) необходимо предварительно задать высоту контейнера (в нашем случае для Div контейнером будет служить тег Body) и только тогда браузер правильно отработает height:100%:
Содержание
В итоге получились два совершенно разных подхода при задании высоты области контента в процентах, поэтому во избежании проблем советую вам в обязательном порядке указывать правильную декларацию doctype в начале всех ваших документов (вебстраниц). Есть и еще один пример, когда разница между режимом следования стандартам и режимом уловок будет колоссальной.
Если вы зададите для какого-либо Html элемента height и width для области контента, а также укажите для этого тега внутренние отступы (padding) и ширину рамки (border), то в режиме уловок (quirks mode — без прописанной декларации) в разных браузерах это все может быть истолковано по-разному.
В старом браузере IE 5.5 внутренние отступы и ширина рамки будут отсчитывать внутрь от заданных через height и width размеров. Т.е. общий размер элемента будет соответствовать тому, что задано в этих CSS свойствах (это устаревшая схема, которая сейчас не используется).
В остальных же современных браузерах отступы padding и ширина рамки border будут прибавляться к тем размерам, что были заданы в height и width. Т.е. в этом случае (режим уловок без doctype) изначально заданные размеры области контента будут расширены на величину внутренних отступов и рамки.
Ну, а если в документе прописать директиву, то абсолютно во всех современных и старых браузерах этих проблем с двойственностью подхода уже можно будет запросто избежать. В этом случае и в IE 5.5 величина внутренних отступов и ширина рамки будет суммироваться с размерами области контента, как этого и требуют современные стандарты CSS. Поэтому во избежании всегда прописывайте doctype.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (5)
Здравствуйте! Очень нравится ваш блог, надеюсь Вы мне поможете. Проблема такая,понравилась тема установил, а в ней закодированный код в фунциях темы в подвале,а проблема в том, что эти ссылки появляются не в подвале ,а сбоку от сайта.В браузере, когда заходишь на сайт, снизу появляется ползунок и сайт можно бпердвинуть вправо код такой
Здравствуйте. Не хочу показаться занудой, но думаю, что вместо слова «широта» в данном контексте уместнее использовать слово «ширина».
А вообще статьи на вашем сайте очень подходят начинающим верстальщикам, спасибо за вашу работу.
Спасибо за статью.помогли очень.команда padding и border помогла справится с неуправляемостью ширины фоток в шаблоне
Давно не был на вашем сайте. Рад что работает. Единственный минус что на первых выдачах появляются овносайты!
Классно повествуете, емко, кратко, своевременно, и примеры отражают максимум того, что нужно для понимания, прочитал несколько книг, так никто не пишет. Спасибо.
Ваш комментарий или отзыв
Почему появляется горизонтальный скролл css
Сейчас мы решим 3 проблемы, которые рано или поздно начинают достигать начинающего веб-разработчика при попытках адаптировать сверстанный им сайт.
Как исправить выезжающий текст?
Проблема. Текст или другой контент начинает выезжать за пределы родительского блока при его сжатии.
Итак, первая проблема напрямую связана с неправильным указанием высоты родительских елементов страницы, в которых и находится тот контент, который начинает выезжать за пределы своего родительского блока.
Часто новички только изучая CSS начинают использовать такие свойства как height и max-height забывая о том, что при уменьшении экрана, контент, находящийся внутри блоков с такими свойствами начинает сжиматься и выходить в нижнюю часть блока (особенно это касается любого текста). Это как сжимать воздушный шар. Мы сжимаем шарик, давление внутри увеличивается и воздух давит на другие его части тем самым расширяя его в другом направлении. Тоже самое и происходит с текстом. Сжимая блок, он уменьшает пространство текста, а текст начинает уходит вниз, пробивая фиксированную высоту своего блока.
Решение. Избавьтесь от фиксированной высоты блоков при адаптации верстки! Для этого просто уберите значения height и max-height в блоках где задумывается их увеличение за счет текста внутри них. Из названий этих свойств видно, что они дают ограничения по высоте блока, а значит если текст достигнет их предела, он будет выходить за него. Не используйте значения height и max-height где нет в них никакой потребности. При адаптации вашей верстки у вас возникнут проблемы на этой почве.
Прежде всего нужно понимать для чего используется max-height и height свойства. Их используют чаще для блоков, которые играют роль контейнеров для фиксированного по объему контента. Этот контент не задумывается увеличиваться в объеме на столько, чтобы это как-то влияло на размер блока. Поэтому либо используйте max-height аккуратно либо откажитесь от них во время верстки резиновых блоков. Ведь как сказал один мудрый верстальщик: «Фиксированная высота блоков это заряженный дробовик, который уже смотрит вам в колено».
Как исправить масштабирование заднего фона?
Проблема. Картинка заднего фона не адаптируется под размер своего блока.
Весь нюанс заключается в том, что вы просто не дописываете нужные правила для заднего фона.
Решение. Добавить к блоку в котором стоит наш фон такую часть кода:
А теперь поясняю. Правило background-size: cover говорит браузеру, что размер картинки фона нужно наложить на всю площадь ее родителя при этом пропорционально растягивая её. Этим правилом мы фиксим проблему с ненужным для нас дублированием картинки фона, что превращает весь фон в страшную матрицу картинок при неестественном изменении размера родителя.
Строка кода background-position: center, в свою очередь, размещает картинку фона по центру своего родителя. Здесь ничего объяснять не нужно, это и так довольно легко для понимания.
ВАЖНО! Если вы таким способом делаете фон для какой либо секции или блока на сайте, который априори имеет больший размер картинки своего фона, эта картинка будет иметь ухудшенное разрешение. Это связано с тем, что те свойства, которые мы прописываем к фону заставляют картинку изменять свой размер пропорционально размеру своего родительского блока. Вообщем, просто запомните, что не стоит ставить картинку, например 800×600 фоном для блока размером 1920×1080. Люди увидевшие это будут лишены всяческого чувства сострадания по отношению к вам, когда вас встретят в 10 часов вечера на улице возле вашего дома с ломом в руках.
Как убрать горизонтальную прокрутку?
Проблема. На меньших экранах сайта появляется горизонтальная прокрутка хотя все елементы адаптированы исправно и не вылазят за пределы своих блоков.
Такая проблема может довольно часто появляться даже у опытных верстальщиков. Особенность этой проблемы в том, что иногда совершенно не понятно в чем кроется проблема появления прокрутки. Ты вроде поубирал ненужные марджины, правильно настроил ширину блоков относительно всей страницы, но злополучный скролл все не исчезает.
Решение. Необходимо добавить селектору body свойство overflow-x: hidden. В коде это выглядит так:
После этого, горизонтальная прокрутка будет отключена на всей странице сайта. Однако, учтите, что это свойство не воспринимают некоторые стандартные мобильные браузеры, в особенности, браузер Safari на IOS устройствах.
Как исправить горизонтальный скролл на сайте
Верстальщики во время разработки сайта как правила сталкиваются с проблемой горизонтального скролла. В чем проблема? Откуда он появился? И как это исправить? Именно об этой и пойдет речь в этой записи.
Ниже я буду описывать способы нахождения элементов, которые создают горизонтальный скролл.
Первое решение
Предлагаю ваш сразу обратить внимание на этот способ.
После указания этого CSS, все элементы на странице будут обведены красным цветом — тем самым можно посмотреть где заканчиваются границы у всех блоков.
Иногда после этого сразу становится понятно какой блок вылазит за границы.
Второе решение
Использовать JavaScript для поиска элементов.
Откройте консоль разработчика в вашем браузере. Нажмите F12 или Ctrl + Shift + i и перейдя во вкладку «Консоль» вставьте этот код и нажмите Enter. После этого у вас должно вывести ТОЛЬКО «undefined» или еще другие строки, например как на скриншоте ниже.
Третье решение
Вам нужно выделить весь контент (заваж мышкой и начать выделять весь текст сайта) и двигать его вправо, тем самым, вы можете найти блок который вылазит за границы. Чтобы визуально представить как это происходит — смотрите GIF’ку ниже.
Четвертое решение (ХАК)
Если из всего вышеперечисленного вам ничего не помогло, тогда предлагаю использовать следующий способ.
Это устанавливает 100% ширину для html и body, а так же убирает скролл по x-оси. Я не советую использовать этот способ, потому что он не решает проблему, а лишь маскирует ее.
Вывод
Вероятнее всего я выписал не все решения, но это основные, которые я использую. Как правило другие мне и не нужно были, так как эти отлично помогали.
Горизонтальный скролл в адаптиве — откуда взялся?
При уменьшении видимой области появляется горизонтальный скролл за пределами страницы. А там вроде как пусто.
Чем меньше размер окна, тем больше скролл.
Пожалуйста, ткните носом, где я ступил?
Ссылка на комментарий
Поделиться на других сайтах
6 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Overflow в CSS
В CSS мы можем контролировать элемент, когда его содержимое слишком велико, чтобы уместиться. Свойство для этого- overflow , которое является сокращением для свойств overflow-x и overflow-y .
В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением.
Вступление
Чтобы использовать свойство overflow, мы должны быть уверены, что элемент, к которому мы его применяем, имеет следующее:
- Уровень блока элемента (например: div , section ) с набором высоты с помощью height или max-height . Под установленной высотой я подразумеваю, что элемент должен иметь содержимое (не пустое), чтобы не добавлять явную высоту.
- Или элемент с white-space установленным на nowrap .
Возможные ключевые слова для переполнения
Свойство overflow может принимать следующие возможные значения:
visible, hidden, scroll, auto
Поскольку overflow это сокращенное свойство, оно может принимать одно или два значения. Первое значение для горизонтальной оси, а второе для вертикальной оси.
Visible
Значение по умолчанию, при котором содержимое может выходить за пределы родительского элемента. Это может быть установлено как:
Интересный факт, который вы должны знать, это то, что когда одна ось установлена visible , а другая ось установлена auto , ось с visible вычисляет ключевое слово auto .
По словам разработчиков сети Mozilla MDN :
Установка одной оси в положение visible (по умолчанию), а другой-в другое значение приводит к тому, что visible ведет себя как auto.
Например, если мы установим элемент со следующим:
Значение свойства overflow будет вычислено auto auto .
Hidden
Когда содержимое длиннее, чем его родитель, оно будет обрезано. Тем не менее, содержимое можно прокручивать с помощью Javascript.
Scroll
Значение scroll позволяет прокручивать, чтобы показать обрезанное содержимое, и оно может быть горизонтальным или вертикальным.
На рисунке выше полоса прокрутки всегда видна, независимо от того, длинное ли содержимое или нет. Обратите внимание, что это зависит от операционной системы.
Я считаю это умным ключевым словом! Она показывает полосу прокрутки, только если содержимое длиннее своего контейнера.
Обратите внимание, что на рисунке полоса прокрутки видна только в том случае, если содержимое длиннее контейнера. Далее мы пройдемся по свойствам, которые относятся к overflow .
Overflow-X
Это отвечает за ось X или горизонтальные стороны элемента.
Overflow-Y
Это отвечает за ось Y или вертикальные стороны элемента.
Примеры использования и примеры
Простой слайдер
Мы можем создать быстрый и простой слайдер, обрезая содержимое по горизонтали и позволяя ему прокручиваться.
В макете выше у нас есть карты, которые разложены горизонтально, и есть полоса прокрутки, которая позволяет нам прокручивать и раскрывать больше контента. Чтобы реализовать это, нам нужно будет сделать следующее:
- Показать карты в одной строке. Я буду использовать flexbox для этого.
- Добавьте overflow-x в контейнер.
И это работает на настольных браузерах. Однако при тестировании этого в Safari для iOS (12.4.1) прокрутка не работала. После некоторых проб и ошибок прокрутка сработала, когда я добавил ширину дочерним элементам. Работает без проблем для iOS (13.3).
Модальный контент
Когда модальное содержимое слишком длинное, мы можем легко сделать область прокручиваемой. Для этого у нас должно быть следующее:
- Максимальная высота для modal.
- Модальное тело должно занимать все доступное пространство.
Карта с закругленными краями
Когда у нас есть карта, и мы хотим, чтобы ее углы были закруглены, мы склонны добавлять border-radius для верхнего и нижнего углов, как показано ниже:
Это может занять много времени, особенно если карта имеет другой дизайн на мобильном телефоне. Например, вместо того, чтобы складывать дочерние элементы, они будут рядом друг с другом.
Для этого случая полезно использовать обертку overflow: hidden , а затем добавить border-radius к ней. Увидеть ниже:
Тем не менее, это решение имеет некоторые оговорки, которые могут сделать его идеальным для всех случаев. Пожалуйста, проверьте правильность.
Усечение текста
Для учета длинного контента мы можем обрезать текст с помощью свойства text-overflow .
На элемент, который мы хотим усечь, я добавил следующее:
Вот и все! Обратите внимание, что overflow: hidden важно, чтобы это работало.
Анимации
Когда дело доходит до анимации, выгода overflow: hidden заключается в обрезании скрытых элементов, которые можно показывать при наведении курсора. Посмотрите на рисунок ниже:
В CSS это будет выглядеть так:
У нас есть две кнопки, и у каждой есть псевдоэлемент, который переводится влево и вниз, соответственно. Смотрите видео ниже:
Общие проблемы с переполнением
Прокрутка на мобильном телефоне
Например, когда у нас есть слайдер, недостаточно добавить overflow-x . В Chrome iOS нам нужно продолжать прокручивать и перемещать контент вручную. Смотрите видео ниже:
К счастью, есть свойство, которое может улучшить процесс прокрутки.
Это называется прокруткой на основе импульса . Согласно MDN :
где содержимое продолжает прокручиваться некоторое время после завершения жеста прокрутки и удаления пальца с сенсорного экрана.
Вот как выглядит результат при прокрутке на основе импульса.
Встроенные блочные элементы
Согласно спецификации CSS:
Базовая линия «встроенного блока» является базовой линией его последнего строкового блока в нормальном потоке, если у него нет либо линейных блоков в потоке, либо если его свойство «переполнения» имеет вычисленное значение, отличное от «видимого», в котором В этом случае базовая линия — это край нижнего поля
Когда элемент inline-block имеет значение overflow , отличное от visible , это приведет к выравниванию нижнего края элемента на основе текстовой базовой линии его родных элементов.
Рассмотрим следующий пример.
Чтобы решить эту проблему, мы должны изменить выравнивание кнопки, которая имеет overflow: hidden .
Проблемы горизонтальной прокрутки
Часто мы сталкиваемся с проблемой горизонтальной прокрутки, и становится все труднее, когда причина неизвестна. В этом разделе я перечислю некоторые распространенные причины горизонтальной прокрутки, чтобы вы могли учесть их при создании макетов.
Элементы, которые абсолютно / фиксированы
Когда есть элемент, который имеет значение позиции absolute или fixed , существует возможность вызвать для него горизонтальную прокрутку. Это может произойти , когда одно из значений left , right позиционирует элемент снаружи элемента тела.
Чтобы решить эту проблему, вам необходимо проверить, почему этот элемент расположен вне области просмотра. Если в этом нет необходимости, его нужно удалить или отредактировать значение позиции.
Элементы Grid
Сетка CSS имеет три случая, которые могут привести к горизонтальной прокрутке. Давайте посмотрим их.
Использование значений пикселей для столбцов
При использовании значений пикселей это приведет к проблемам, когда ширина области просмотра мала. Увидеть ниже:
Решение состоит в том, чтобы сбросить столбцы и использовать только тот, который указан выше, в области просмотра, где достаточно места.
Использование Minmax ()
Может быть заманчиво забыть о тестировании для мобильных устройств, так как это приведет к горизонтальной прокрутке в некоторой точке, поскольку минимальная ширина равна 300px .
Простое исправление для того, чтобы сбросить grid-template-columns до 1fr и изменить его , когда окно просмотра больше.
Использование процентов вместо фракции
Согласно этому твиту от Джейка Арчибальда, если мы использовали процент для столбцов сетки, а затем добавили grid-gap , это вызовет горизонтальную прокрутку. Причина в том, что значение grid-gap добавляется к ширине контейнера.
Чтобы исправить это, избегайте использования процентов для столбцов сетки и используйте вместо этого 1fr . При использовании grid-gap будет вычитаться из доступного пространства.
Flex Wrap
Для гибких элементов важно добавить их в контейнер flex-wrap , иначе они могут стать беспорядочными для небольших областей просмотра.
Выше не достаточно. Обязательно добавьте, flex-wrap чтобы избежать неожиданных переполнений.
Длинные слова или ссылки
Когда речь идет о длинных словах или ссылках, размещенных внутри контента, он должен переходить на новую строку или иначе, как вы уже догадались! Там будет горизонтальная прокрутка.
Чтобы это исправить, нам нужно разбить длинные слова и ссылки. Вот как мы можем это сделать:
Или мы можем использовать text-overflow :
Изображения без max-width: 100% набора на них
Если вы не используете сброс CSS, вы можете случайно забыть использовать max-width: 100% для всех img , так как это сделает их отзывчивыми на мобильных устройствах. Если нет, это вызовет проблемы. Пожалуйста, проверьте .
Использование фиксированной ширины
Фиксированная ширина может вызвать проблемы при использовании, и, как правило, я стараюсь избегать ее настолько, насколько могу. Если это действительно необходимо, то лучше использовать его max-width , поэтому, если места недостаточно для значения width , тогда все max-width будет работать.
Добавление max-width позволит избежать горизонтальной прокрутки.
Как отладить проблемы горизонтальной прокрутки
Теперь, когда мы знаем причины горизонтальной прокрутки, я объясню некоторые способы, которые могут помочь нам определить эти проблемы и решить их.
Используйте CSS Outline
Это первое, что я обычно делаю для отладки.
Добавляя это, мы можем заметить, какие элементы имеют большую ширину, чтобы мы могли решить эту проблему. Адди Османи развил это с помощью своего простого сценария:
Этот скрипт выполняет случайное выделение цветов контура, что упрощает его, вместо того чтобы все контуры были одного цвета.
Firefox ярлык scroll
В Firefox есть небольшая метка, добавленная к элементам, которые вызывают горизонтальную прокрутку. Разве это не круто?
Удаление элементов
Иногда описанные выше методы не работают. В этом случае я открываю DevTools, а затем начинаю удалять элементы и замечаю. Как только горизонтальная прокрутка исчезла, я могу определить элемент, который вызывает проблему.
Пожалуйста, сделайте Overflow-X: Hidden своим последним решением
Наконец, вы можете использовать overflow-x: hidden для решения проблемы горизонтальной прокрутки, но, пожалуйста, сделайте это вашим последним вариантом.
Похожие публикации:
- Как задать ширину параграфа в css
- Как закруглить outline css
- Как сместить блок вправо css
- Как создать контейнер в css