Я пытаюсь сделать часть моей веб-страницы, которая соответствует ширине браузера, потому что я использую 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;
}
Поскольку вы используете position: absolute, вместо использования:
width: 100%; margin-right: 10px; margin-left: 10px
вы должны использовать:
left: 10px; right: 10px
Это сделает ваш элемент доступным для всей ширины, с 10px пробелом слева и справа.
Вам нужно удалить 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;
}
Кажется, вы установили ширину на 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.
У меня была аналогичная проблема с абсолютным позиционированным элементом, и я хотел использовать ширину 100%. Это подход, который я использовал, и он решил мою проблему:
box-sizing=border-box
В противном случае у меня всегда было небольшое содержимое и заполнение, проталкивающееся через полосу прокрутки.
Ответ заключается в том, что у вас есть набор полей, который сделает div шире, чем 100%; следовательно, полосы прокрутки.
Если вы можете избавиться от полей, сделайте это! Однако часто вам нужны поля. В этом случае оберните все это в div контейнера и установите поля на 0 с шириной на 100%.
Если контент требует этого, должны присутствовать полосы прокрутки. Вы пробовали CSS → ширина: наследовать; ?