100% ширина DIV на самом деле не 100%

Когда у меня есть <div> с width: 100%, это действительно не 100%:

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

Теперь, когда вы изменяете размер окна, есть горизонтальная полоса прокрутки, и вы прокручиваете вправо, затем фон исчезает. Как я могу оставаться фоном в этом случае?

Здесь вы можете увидеть проблему в действии: http://beta.ovoweb.net/?i=3

Теперь, когда вы изменяете размер окна и прокручиваете вправо, вы больше не можете видеть фон. Как это исправить?

Ответ 1

Значение 100% равно 100% от родительской ширины или порта представления. См. Документацию .

Ответ 2

Ширина: 100%, сильно зависит от ее маржи и маржи и заполнения родителя (тела в вашем случае). SO, reset их сначала

Что-то вроде

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

Ответ 3

добавить это в css:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

Тогда он должен работать.

Ответ 4

100% - это только 100% доступной ширины, основанной на родительском контейнере. Поэтому, если вы создаете DIV шириной 500 пикселей, затем вставьте еще один DIV внутри с шириной 100%, ваш 100% DIV может расширяться до 500 пикселей (не считая каких-либо отступов или полей, поэтому вам нужно reset их до 0).

Ответ 5

Это должно сделать это (добавьте эту строку в самую верхнюю часть вашего файла CSS):

* { margin: 0; padding: 0; }

Работает для меня все время.

Ответ 6

i большую часть времени добавляю этот бит кода в мой css. Это должно сработать и для вас. да, ширина или высота 100% всегда основывается на родительском контейнере.

CSS

*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}


#container{
width:100%;
height:100%;
background:gray;
position:relative;
display:block;
}
#content{
height:50px;
width:50px;
bottom:20px;
right:10%;
background:red;
position:absolute;
}

HTML

<div id="container">
    <div id="content">
    </div>
</div>

OUTPUT

Ответ 7

В моем случае тег div не занимал 100% своего родительского тега, потому что div имел отображение "inline". Изменение этого параметра на "встроенный блок" исправило эту проблему.