1. дома
  2. Вопрос и ответ
  3. не может избавиться от горизонтальной полосы прокрутки на моем сайте

не может избавиться от горизонтальной полосы прокрутки на моем сайте

2010-10-04 4 views

ответ

20

Удалить width:100% из ваших трех основных элементов.

Добавив width: 100%, вы заставляете клиентскую область каждого элемента заполнять браузер.
Поскольку границы элементов добавляют дополнительный пиксель с каждой стороны, вы получаете полосу прокрутки.

источник

2010-10-04 13:53:52 SLaks

+2

по умолчанию, divs, являющиеся элементами уровня блока, заполнят 100% пространства, которое они могут (по горизонтали), поэтому вам действительно не нужно указывать ширину 100% – jimplode

4

Сделайте свой контент подходящим в окне.

или

<body scroll="no" style="overflow: hidden">

источник

2010-10-04 13:53:24 jimplode

+2

Что делать, если окно меньше содержимого? Как вы просматриваете скрытый контент? – aldux

3

Это ваша граница 1px. Вы установили ширину основных элементов на 100%, а затем добавили границу 1px вокруг объектов.

источник

2010-10-04 13:56:10

+2

Это похоже на то, что я всегда находил раздражающим в CSS, что он не позволяют указывать выражения типа «100% -4px». – Spudley

+0

@Spudley На самом деле, вы можете. 'width: calc (100% - 4px);' – frederick99

+0

@ frederick99 - спасибо за комментарий. 'calc()' не был доступен в 2010 году, когда я прокомментировал; он даже не был в стадии разработки. Это настоящее благословение иметь его в CSS сегодня, и я много использую его (хотя я все же считаю, что я должен быть осторожным с ним, потому что он разбивает старые браузеры). Обратите внимание, что 'box-sizing: border-box', вероятно, было бы хорошим решением для исходной проблемы здесь, но это также не было вариантом в то время. Все пошло, слава богу. – Spudley

2

Элемент #top-wrapper имеет ширину 100% и границу 1px (слева и справа), суммарно равную 100% + 2px (2px больше что есть), поэтому появляется полоса прокрутки. Рекомендуемое решение (не обходное решение!) Заключается не в том, чтобы добавить width:100%; для элементов, которые вы хотите занять всю ширину своих соответствующих родителей, но пусть браузер позаботится об этом.

Плавающие ящики являются исключением из этой рекомендации, и их нужно обрабатывать по-разному. Для получения дополнительной информации вы можете посмотреть здесь http://www.w3.org/TR/CSS2/box.html

Надеется, что это отвечает на ваш вопрос, Алинь

источник

2010-10-04 14:07:16

1

В моем случае это был небольшой <div> с относительным положением left: 690px, который сделал браузеры добавить горизонтальный интервал (а полоса прокрутки).

#feedbackButton { 
     position: relative; 
     height: 0; 
     top: -46px; 
     left: 790px; 
}

Я изменил это float: left и вопрос был решен.

источник

2012-02-17 09:20:11 Timo

0

<body style="overflow-x: hidden;">

Это достаточно. Вы можете просто использовать

overflow-x: hidden;

на бирке тела.

источник

2018-03-07 19:40:32 VikasGaurav

Смежные вопросы

 Смежные вопросы