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

Question

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

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

...

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

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

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

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

Answer 1

Значение 100% - это 100% ширины родительского элемента или порта просмотра.См. документацию .

Answer 2

Ширина: 100%, сильно зависит от его поля, отступа и отступа родительского элемента (тело в вашем случае). ТАК, сначала сбросьте их

Что-то вроде

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

DEMO

Answer 3

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

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

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

Answer 4

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

* { margin: 0; padding: 0; }

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

Answer 5

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

Answer 6

я чаще всего добавляю этот бит кода к моему 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;
}

1010 * HTML

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

OUTPUT

Answer 7

В моем случае тег div не занимал 100% своего родительского тега, потому что div отображал «inline». Изменение на «inline-block» решило эту проблему.