Ширина: 100% без полос прокрутки - PullRequest
Новая
       12

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

25 голосов
/ 11 июня 2011

Я пытаюсь сделать часть своей веб-страницы размером с браузер, для этого я использую 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;
}

Ответы [ 5 ]

31 голосов
/ 11 июня 2011

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

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

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

left: 10px; right: 10px

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

2 голосов
/ 11 июня 2011

Вы должны удалить 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;
}
1 голос
/ 25 февраля 2017

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

box-sizing=border-box

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

1 голос
/ 11 июня 2011

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

Попробуйте поискать в Google для «гибких (двух / трехколоночных) раскладок css».

Вот пример, 

<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.

0 голосов
/ 11 июня 2011

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

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

...