100% DIV width is not really 100%

问题:

When I have a <div> with width: 100%, it is not really 100%:

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

...

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

Now when you resize the window, so there is a horizontal scrollbar, and you scroll to the right, then the background is vanished. How can I remain the background in this case?

Here you can see the problem in action: http://beta.ovoweb.net/?i=3

Now when you resize the window and scroll to the right, you can't see the background anymore. How to fix this?

回答1:

The 100% value is 100% of the parent's width or the view port. See the documentation.

回答2:

Width: 100%, is highly affected by its margin and margin and padding of its parent (body in your case). SO, reset them first

Something like

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

DEMO

回答3:

add this to css:

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

Then it should work.

回答4:

100% is only 100% of the available width, based on the parent container. So if you create a DIV with width 500 pixels, then nest another DIV inside with width 100%, your 100% DIV can expand to a maximum of 500 pixels (not counting any padding or margin so you need to reset them to 0).

回答5:

This oughta do it (add this line to the very top of your CSS file):

* { margin: 0; padding: 0; }

Works all the time for me.

回答6:

i most of the time add this bit of code to my css. It should work for you too. yes, 100% width or height is always based on the parent container.

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:

In my case, the div tag did not take up 100% of its parent tag because the div had a display of "inline." Changing it to "inline-block" fixed that problem.