Скрыть горизонтальную полосу прокрутки

У меня проблема с горизонтальной полосой прокрутки. Я не хочу, чтобы это появлялось. На самом деле он отображается только в Chrome, а не в Internet Explorer. Что я могу сделать? Я попытался изменить ширину и отступы в классе css, но это также меняет макет. Содержимое внутри теста является динамическим, поэтому оно может переполняться по вертикали, и это нормально, потому что мне не нужна только горизонтальная полоса прокрутки.

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

вот скрипт, если вам это нужно: http://jsfiddle.net/XLY9L/

Спасибо


html css scrollbars
person Gyonder    schedule 03.04.2013    source источник
comment
Пожалуйста, измените название вопроса, так как оно не отражает вашу проблему.   -  person Dmytro Grynets    schedule 03.05.2018

Ответы (5)


arrow_upward
8
arrow_downward

Для этого есть простое решение, просто добавьте это в свою декларацию CSS:

box-sizing: border-box;

Причина появления горизонтальной полосы прокрутки заключается в том, что отступы и границы по умолчанию добавляются к любой ширине, которую вы даете своему элементу. При явной установке значения border-box отступы и границы включаются в это значение ширины.

Это свойство поддерживается в IE8+, FireFox 19+ (при использовании -moz-box-sizing), iOS Safari и Android (при использовании -webkit-box-sizing).

Кроме того, я настоятельно рекомендую использовать сокращенную форму css следующим образом:

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}
person micadelli    schedule 03.04.2013
comment
Спасибо. Я добавляю только для добавления -moz-box-sizing: border-box; -webkit-box-sizing: рамка-бокс; box-sizing: граница-коробка; сделать его совместимым с моим браузером. - person Gyonder; 03.04.2013
comment
Раскачать! Это все, что вам нужно, чтобы получить полную поддержку - person micadelli; 03.04.2013

arrow_upward
8
arrow_downward

Вы можете попробовать простым способом

BODY {
    overflow-x:hidden;
}
person Michał Wrotkowski    schedule 03.04.2013

arrow_upward
3
arrow_downward

В качестве альтернативы ответу @micadelli вы можете удалить width: 100%, потому что <div class="test"> является элементом уровня блока и автоматически заполнит горизонтальное пространство, которое он занимает в текущем контейнере.

person Amy    schedule 03.04.2013
comment
box-sizing имеет место быть, но это правильное решение. Добавление 100% ширины к блочному элементу просто создает кучу проблем, поэтому важно понять, почему это не требуется. Кроме того, если требуется поддержка IE7 (ура), то box-sizing не подходит. - person CherryFlavourPez; 03.04.2013
comment
Я согласен, что это ответ, если нет особой причины устанавливать его ширину на 100% вручную. - person micadelli; 03.04.2013
comment
@micadelli - в приведенном случае это самое простое решение. Мне любопытно, когда вы решите установить width на 100% вручную? - person CherryFlavourPez; 03.04.2013
comment
@CherryFlavourPez Должен признаться, я не понял простого случая, когда использовать это 100% :) Но на самом деле я имел в виду, что если ширина не требуется явно для установки каких-либо% - person micadelli; 03.04.2013
comment
@micadelli Абсолютно — изменение блочной модели для всего (* FTW) почти наверняка облегчит жизнь ОП в будущем. Я обнаружил, что для адаптивных сайтов это единственный вариант. Но даже в этом случае вы не стали бы явно устанавливать ширину на 100 % — это ничего не делает. - person CherryFlavourPez; 03.04.2013
comment
Правда, это только усложняет дело, имхо. Аминь! - person micadelli; 03.04.2013

arrow_upward
3
arrow_downward

Добавьте этот код в свой CSS. Это отключит горизонтальную полосу прокрутки.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
person vasanth    schedule 26.10.2015
comment
Да, так как это также отключит прокрутку. Мы хотим иметь возможность горизонтальной прокрутки. Это отключает это. - person Radmation; 08.08.2017

arrow_upward
0
arrow_downward

вы также можете попробовать этот простой код css на своем веб-сайте. просто напишите overflow-x:hidden; на теге тела. это будет скрываться от вашего тела.

person Ihsan Khattak    schedule 03.04.2013