Ширина: 100% без полос прокрутки

Я пытаюсь сделать часть моей веб-страницы, которая соответствует ширине браузера, потому что я использую width: 100%, проблема в том, что она показывает полосы прокрутки, и я не могу использовать overflow-x: hidden;, потому что это сделает часть содержимого скрытой, так как я могу это исправить?

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    -webkit-user-select: text;
}

Ответ 1

Поскольку вы используете position: absolute, вместо использования:

width: 100%; margin-right: 10px; margin-left: 10px

вы должны использовать:

left: 10px; right: 10px

Это сделает ваш элемент доступным для всей ширины, с 10px пробелом слева и справа.

Ответ 2

Вам нужно удалить margins в элементе #news

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

Если это не сработает, вы можете установить margin и padding на самом элементе. Ваш div - если это то, что вы используете, может иметь стили, применяемые к нему, либо в стилях стилей, либо в стиле базового браузера. Чтобы удалить их, задайте поля специально 0 и добавьте !important.

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}

Ответ 3

Кажется, вы установили ширину на 100%, но есть также поля, которые заставляют ширину расширяться дальше.

Попробуйте выполнить поиск в google для "css flexible (two/three-collumn) макетов".

Вот пример,

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

и css

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

#menu div, будет выровнена влево и будет иметь статическую ширину 200px. #main div, будет "начинаться" ниже #main, но из-за него 200px padding (также может быть полем) его содержимое и дочерние элементы начнутся - где заканчивается #menu.

Мы не должны устанавливать #main на ширину процента (например, 100%), потому что к этому будут добавлены 200 пикселей левого дополнения и разбейте макет, добавив полосы прокрутки к оси X.

Ответ 4

У меня была аналогичная проблема с абсолютным позиционированным элементом, и я хотел использовать ширину 100%. Это подход, который я использовал, и он решил мою проблему:

box-sizing=border-box

В противном случае у меня всегда было небольшое содержимое и заполнение, проталкивающееся через полосу прокрутки.

Ответ 5

Ответ заключается в том, что у вас есть набор полей, который сделает div шире, чем 100%; следовательно, полосы прокрутки.

Если вы можете избавиться от полей, сделайте это! Однако часто вам нужны поля. В этом случае оберните все это в div контейнера и установите поля на 0 с шириной на 100%.

Ответ 6

Если контент требует этого, должны присутствовать полосы прокрутки. Вы пробовали CSS → ширина: наследовать; ?