html 宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2815181/
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
Html width 100%
提问by vtortola
This is driving me nuts. What happens with "width:100%" ? Apparently it just works in IExplore, so I think it's one of those things Microsoft made up.
这让我发疯。"width:100%" 会发生什么？显然它只适用于 IExplore，所以我认为它是微软制造的东西之一。
But then... how do you tell to a element that has to take all available parent's space in a way that all browsers can understand?
但是……你如何告诉一个必须以所有浏览器都能理解的方式占用所有可用父空间的元素？
Cheers?
干杯？
回答by Sam152
A block level element (display:block;) will automatically take up 100% of the width of the parent element. You can resize its width using percentages or pixels. Inline elements (display:inline;) cannot have their width modified.
块级元素 (display:block;) 将自动占据父元素宽度的 100%。您可以使用百分比或像素调整其宽度。内联元素 (display:inline;) 不能修改其宽度。
If you want something to take up all the parent elements space I suggest you try something like this:
如果你想要一些东西占据所有父元素空间，我建议你尝试这样的事情：
.class{
display:block;
width:100%;
}
回答by Jim L
Width:100% is certainly not a MS fabrication. Understanding things like box model and inline vs block (e.g spans vs divs) elements will help you to understand some of what you will see. The browser differences have less to do with "Width:100%" than with how browsers interpret the box model for a given element, and in particular things like margins, borders, and padding.AFAIK, all browsers will honor width:100%, but how they interpret everything else may impact how much space they give over as "100%".
宽度：100% 当然不是 MS 制造。理解框模型和内联与块（例如跨度与 div）元素之类的东西将帮助您了解您将看到的一些内容。浏览器的差异与“宽度：100％”的关系不大，而与浏览器如何解释给定元素的框模型有关，特别是边距，边框和填充等。AFAIK，所有浏览器都将遵守宽度：100％，但是他们如何解释其他一切可能会影响他们作为“100%”给予多少空间。
Remember that 100% is 100% of the PARENT, not the WINDOW.
请记住，100% 是 PARENT 的 100%，而不是 WINDOW。
<body>
<div id = "one" style="width:50%">
<div id = "two" style = "width:100%" />
</div>
</body>
In this case, "two" will still only be 50% of the window wide because it is in a parent that is 50% wide. (1 * .5 = .5)
在这种情况下，“两个”仍然只有窗口宽度的 50%，因为它位于 50% 宽度的父级中。(1 * .5 = .5)
So, saying that, a specific example of baffling behavior would greatly help people give you a specific answer.
所以，这么说吧，一个莫名其妙的行为的具体例子会极大地帮助人们给你一个具体的答案。
回答by Pops
If I understand you correctly, you're asking whether width: 100%is IE-only. The answer is no; it's understood by all mainstream browsers. Source: http://www.w3schools.com/css/pr_dim_width.asp
如果我理解正确，您是在问是否width: 100%仅支持 IE。答案是不; 所有主流浏览器都理解它。来源：http: //www.w3schools.com/css/pr_dim_width.asp
回答by Frank Schwieterman
Note that width:100% will not work on inline tags... So things like or where the property 'display' as value 'inline' are not effected.
请注意，宽度：100% 不适用于内联标签......因此，诸如 'display' 作为值 'inline' 之类的东西或属性不会受到影响。
If thats news to you I recommend grabbing a book as HTML is not something to learn adhoc.
如果这对你来说是新闻，我建议你拿起一本书，因为 HTML 不是专门学习的东西。
回答by Free
html {
width:100%;
}
body {
background-color:#f2f2f2;
margin:0;
padding:0;
}
a {
color:#ec3f3f;
text-decoration:none;
font-weight:400;
font-style:normal;
}
a:hover {
color:#262626;
text-decoration:none;
font-weight:400;
font-style:normal;
}
p,div {
margin:0!important;
}
table {
border-collapse:collapse;
}
::-moz-selection,::selection {
background:#ec3f3f;
color:#fff;
}
.ReadMsgBody,.ExternalClass {
width:100%;
background-color:#f2f2f2;
}
@media only screen and max-width640px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}
img[class=divider] {
width:440px!important;
height:2px!important;
}
table[class=spacer] {
display:none!important;
}
td[class=center] {
text-align:center!important;
}
table[class=full] {
width:400px!important;
margin-left:20px!important;
margin-right:20px!important;
}
table table,td[class=full_width] {
width:100%!important;
}
div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:440px!important;
margin:0 auto!important;
}
}
@media only screen and max-width479px{
img[class=img_scale] {
width:100%!important;
height:auto!important;
}
img[class=divider] {
width:280px!important;
height:2px!important;
}
table[class=spacer] {
display:none!important;
}
td[class=center] {
text-align:center!important;
}
table[class=full] {
width:240px!important;
margin-left:20px!important;
margin-right:20px!important;
}
table table,td[class=full_width] {
width:100%!important;
}
div[class=div_scale],table[class=table_scale],td[class=td_scale] {
width:280px!important;
margin:0 auto!important;
}
}
