Html 100% DIV 宽度并不是真正的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6344380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% DIV width is not really 100%
提问by www.data-blogger.com
When I have a <div>with width: 100%, it is not really 100%:
当我有一个<div>with 时width: 100%，它并不是真正的 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
在这里您可以看到实际问题：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?
现在，当您调整窗口大小并向右滚动时，您将看不到背景了。如何解决这个问题？
采纳答案by James Sumners
The 100% value is 100% of the parent's width or the view port. See the documentation.
100% 值是父级宽度或视口的 100%。请参阅文档。
回答by Starx
回答by Arda
add this to css:
将此添加到css：
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
Then it should work.
那么它应该工作。
回答by shane
This oughta do it (add this line to the very top of your CSS file):
应该这样做（将此行添加到 CSS 文件的最顶部）：
* { margin: 0; padding: 0; }
Works all the time for me.
一直为我工作。
回答by Dan
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).
100% 只是可用宽度的 100%，基于父容器。因此，如果您创建一个宽度为 500 像素的 DIV，然后在其中嵌套另一个宽度为 100% 的 DIV，您的 100% DIV 可以扩展到最大 500 像素（不计算任何填充或边距，因此您需要将它们重置为 0）。
回答by GaurabDahal
i most of the time add this bit of codeto my css. It should work for you too. yes, 100% width or height is always based on the parent container.
我大部分时间都将这段代码添加到我的 css 中。它也应该对你有用。是的，100% 宽度或高度始终基于父容器。
CSS
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
? HTML
<div id="container">
<div id="content">
</div>
</div>?
OUTPUT
输出
回答by James in Indy
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.
在我的例子中，div 标签没有占据其父标签的 100%，因为 div 显示为“inline”。将其更改为“内联块”解决了该问题。
回答by RivkaZ
check if you have this code in the div or it parent:
检查您在 div 或它的父级中是否有此代码：
#div {
max-width: 300px;
}
or
或者
#div {
max-width: 50%;
}
This cause the width not to be 100% of the page. Just remove it.
这会导致宽度不是页面的 100%。只需将其删除。
