БЛОГ НА HUSL


Как убрать горизонтальный scrollbar?

Автор вопроса: Alexandr

Помогите пожалуйста найти элемент css который создаёт пакостный горизонтальный скролл. Уверен что это в блоке "uslugi", но сам элемент путём перебора так и не нашёл. Пришлось убрать все авторазмеры и т.п. но даже так скролл бар не пропадает.

Ссылка на скриншот со скроллбаром и самим блоком, удалив который скроллбар пропадает

* {
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    font-weight: 0;
}

.header {
    width: 1920px;
    height: 110px;
    position: relative;
}

.logo {
    margin-left: 405px;
    position: absolute;
    margin-top: 33px;
}

.name {
    position: absolute;
    margin-left: 475px;
    margin-top: 34px;
    font-family: Merriweather;
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    color: #005FA3;
}

.name a {
    color: #005FA3;
    text-decoration: none;
}

.infotop{
    position: absolute;
    width: 800px;
    margin-top: 22px;
    margin-left: 850px;
}

.infotop p {
    padding-left: 15px;
    padding-right: 42px;
    float: right;
    font-family: Montserrat;
    font-size: 13px;
    line-height: 17px;
}

.phone, .time, .mail, .location {
    float: left;
}

.menu {
    position: absolute;
    width: 695px;
    margin-left: 850px;
    margin-top: 62px;
}

.menu ul {
    text-align: justify;
    line-height: 0;
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 17px;
    text-transform: uppercase;
}

.menu ul:after {
    width: 100%;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
    content: "";
    display: inline-block;
}

.menu ul li {
    display: inline-block;
    text-align: left;
}

.menu a {
    text-decoration: none;
    color: black;
}

.menu a:hover {
    text-decoration: none;
    color: #005FA3;
}

#slider {
    position: relative;
    width: 1920px;
    height: 670px;
    background-image: url(../img/rectangle.png);
}

.uslugi {
    position: relative;
    width: 1920px;
    height: 1242px;
    background-color: #EBEBEB;
    display: block;
}

.uslugi__title h2 {
    position: absolute;
    font-size: 24px;
    color: #BDBDBD;
    font-family: Montserrat;
    margin-left: 405px;
    margin-top: 140px;
}

.uslugi__title h1 {
    font-size: 48px;
    position: absolute;
    font-family: Montserrat;
    margin-left: 407px;
    margin-top: 203px;
}

.uslugi__image {
    position: absolute;
    width: 1110px;
    height: 750px;
    margin-left: 405px;
    margin-top: 352px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.uslugi__image__img {
    width: 350px;
    height: 360px;
    background-image: url(../img/image_uslugi1.png);
    margin-bottom: 30px;
    text-decoration: none; 
    color: #fff;
}

.uslugi__image__img:hover {
    background-image: url(../img/image_uslugi2.png);
}

.uslugi__text {
    margin-top: 261px;
    margin-left: 45px;
    font-size: 24px;
    width: 30px;
    font-family: Montserrat;
}
<!DOCTYPE html>
<html>
<head>
    <title>Figma #1</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div><a href=""><img src="img/logo.png" class="logo"></a></div>
        <div class="name"><a href="">BuhOne</a></div>
        <div class="infotop">
            <div class="phone"><img src="img/icons/phone.png"><p>8 (111) 222-33-44</p></div>
            <div class="time"><img src="img/icons/time.png"><p>Пн-Пт 10:00-18:00</p></div>
            <div class="mail"><img src="img/icons/mail.png"><p>[email protected]</p></div>
            <div class="location"><img src="img/icons/location.png"><p>Невский пр. 130</p></div>
        </div>
        <div class="menu">
            <ul>
                <li><a href="">Главная</a></li>
                <li><a href="">Услуги</a></li>
                <li><a href="">Кейсы</a></li>
                <li><a href="">О компании</a></li>
                <li><a href="">Контакты</a></li>
            </ul>
        </div>
    </div>
    <div id="slider">
        Слайдер
    </div>
    <div class="uslugi">
        <div class="uslugi__title">
            <h2>Наши услуги</h2>
            <h1>Мы специализируемся</h1>
            <div  class="uslugi__image">
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
                <a href="#"  class="uslugi__image__img"><p class="uslugi__text">Бухгалтерское обслуживание</p></a>
            </div>
        </div>
    </div>
    <div>О нас</div>
    <div>Наши клиенты</div>
    <div>Отзывы</div>
    <div>Связь с нами</div>
</body>
<footer>
    <div>Подвал</div>
</footer>
</html>


Источник

Ответы (3 шт):

Автор решения: Zhihar

элементы overflow, overflow-x, overflow-y

http://htmlbook.ru/css/overflow

http://htmlbook.ru/css/overflow-x

http://htmlbook.ru/css/overflow-y

по умолчанию (когда не указаны эти свойства) - auto, т.е. "В зависимости от браузера, в основном, полоса прокрутки добавляется только при необходимости"

→ Ссылка
Автор решения: Zhihar

Я кажется смог воспроизвести ошибку!!! :) До этого у меня скролла не было, но у меня монитор пошире

введите сюда описание изображения

В общем ситуация возникает вплоть до разрешения 1920 x 1080.

Очень похоже, что автор сделал верстку под это разрешение, но...

  1. из-за того, что страница "высокая", то она целиком не влезает в монитор и появляется вертикальный скролл

  2. из-за того, что появился вертикальный скролл, то размер "окна" в котором выводится страница стал меньше на ширину скролла и страница с фицксированной шириной в 1920px уже не влезает в 1900px и появляется горизонтальный скролл

Автору лучше переформировать свою страницу, т.е. уйти вот от этой жесткой фигни:

.header {
    width: 1920px;
    height: 110px;
    position: relative;
}

уменьшить ширину хотя бы пикселей на 20 :)

→ Ссылка
Автор решения: Владислав

В таких случаях указываю:

body {
    overflow-x: hidden;
}

Либо скроль вправо и инспектируй по свободному полю. Но иногда выходит на какой-то пиксель, поймать тяжело, а проблема возникает. Поэтому я просто прописываю что сказал и не заостряю на этом внимания. :)

→ Ссылка

licensed under cc by-sa 3.0 with attribution.