100% DIV width is not really 100%

Question

When I have a

with width: 100%, it is not really 100%:

testtesttesttesttest

...

#di         


        

相关标签:

Answer 1

check if you have this code in the div or it parent:

 #div  {
    max-width: 300px;
}

or

 #div  {
    max-width: 50%;
}

This cause the width not to be 100% of the page. Just remove it.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

add this to css:

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

Then it should work.

Answer 6

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.