CSS с горизонтальной полосой прокрутки

Question

у меня есть этот CSS в моей основной таблицы стилей возможно удалить горизонтальную полосу прокрутки из этого CSS:

html, body, #wrap { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    font-family:Calibri; 
} 
#wrap { 
    height: auto; 
    min-height: 100%; 
} 

/* header stuff */ 
#header-topbar { 
    width:100%; 
    height:30px; 
    padding:10px 10px 10px 10px; 
    background-color:#666666; 
} 
#header-topbar2 { 
    width:100%; 
    height:80px; 
    padding:10px 10px 10px 10px; 
    background-color:#eeeeee; 
} 
#phone-tel { 
    position:block; 
    float:right; 
    margin-right:16%; 
    margin-top:5px; 
    font-size:20px; 
} 
#logo { 
    position:absolute; 
    float:left; 
    margin-left:15%; 
    margin-top:0px; 
} 

/* main body/content */ 
#body-content { 
    padding-bottom:200px; 
    width:70%; 
    margin:120px auto 0 auto; 
    padding:10px 10px 10px 10px; 
    border:solid 1px #a79494; 
    border-top:solid 4px #a2cd3a; 
} 

/*footer */ 
#footer .column { 
    margin-top:-200px; 
    clear:both; 
    float: left; 
    width: 25%; 
} 

#footer .column div { 
    margin: 5px; 
    height: 200px; 
    background: #eeeeee; 
} 

я попытался добавить ширину: 100% тела, HTML, а также обивка: 0 и поле: 0, но по-прежнему не работает

Answer 1

отрезая из большой части кода, ваша комбинация проблема в том, что-то вроде этого:

#header-topbar { 
    width:100%; 
    padding:10px 10px 10px 10px; 
} 

В CSS Box model определяет ширина как ширина содержимого, с добавлением полей и дополнений дополнительно вокруг контента.

Итоговое пространство ваших заголовков составляет 100% + 20 пикселей, которое всегда будет шире экрана.

Как отмечалось в комментариях ниже, элементы уровня блока будет автоматически занимают всю ширину своих родителей, поэтому извлекать width:100%; здесь, и оставляя в обивке, может быть допустимым вариантом.

Есть случаи, когда вы специально хотите процентную ширину, особенно с поплавками (я часто делаю это с жидкостью с несколькими макетами столбцов).

Моего стандартное решение проблемы заполнения, когда требуется процент ширина выглядит немного как это:

width: 95% 
padding-left:2.5%; 
padding-right:2.5%; 

Обратите внимание, что мы с указанием отступов и шириной в тех же единицах, и в общей сложности сумма составляет 100% (95 + 2,5 + 2,5 = 100)

Answer 2

Dirty Устранить

html, body, #wrap { 
    overflow-x:hidden; 
    } 

jsFiddle example

Answer 3

Проблема в том, что вы устанавливаете ширину своих элементов на 100%, а затем добавляете к ней путем установки дополнения. Вы можете установить box-sizing на border-box для этих элементов, что приведет к тому, что прокладка будет проходить внутри ширины (но не работает в IE7), или вы можете добавить элемент внутри этих элементов, который затем установите дополнение.

* { 
    box-sizing: border-box; 
} 

http://jsfiddle.net/ryanbrill/mxk4T/

Для поддержки браузера в box-sizing см http://caniuse.com/#search=box-sizing