Html CSS 主体宽度未填充 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20400755/
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
CSS body width does not fill 100 percent
提问by Cald
回答by Jasper Lankhorst
Might want to check if this might work, it did for my particular issue.
可能想检查这是否可行，它确实针对我的特定问题。
body {
min-width: fit-content;
}
Added the answer of John Mcnulty as an paste because weblinks might go as 404. And this actually helped a bit to normalize the css without having browsers put their own css in it.
添加了 John Mcnulty 的答案作为粘贴，因为网络链接可能会变成 404。这实际上有助于规范化 css，而无需浏览器将自己的 css 放入其中。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
回答by Mohsen Safari
回答by RWAM
?hm, your div.container has a width of 970px. And this breaks your body width because your layout isn't fluid. Use media queries or procentual widths will help a lot.
? 嗯，你的 div.container 有 970px 的宽度。这打破了你的身体宽度，因为你的布局不流畅。使用媒体查询或 procentual 宽度会有很大帮助。
回答by Kryssthanel
Maybe some clear:both;that are missing..
可能有些东西clear:both;不见了。。
Up : It's probably not that, but maybe other sub-elements block width and does not allow the page to take its total width. If you have any float should think about making a clear before the footer (as I see a div on the right).
Up : 可能不是这样，但可能其他子元素块宽度并且不允许页面占用其总宽度。如果你有任何浮动应该考虑在页脚之前做一个明确的（因为我在右边看到了一个 div）。
See your html / css code would be better :)
看看你的 html/css 代码会更好:)
回答by Azad Chouhan
try this
尝试这个
body
{
margin:0px;
padding:0px;
width:100%;
}
回答by zanderGcu
Ok so this worked for me:
好的，这对我有用：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
My padding on sections of 100% was adding the padding to the page width resulting in width 100% + (padding value * 2)
我对 100% 部分的填充是将填充添加到页面宽度导致宽度 100% +（填充值 * 2）
回答by Asraful Haque
is it your expected result? Check it and tell me as soon as possiable
这是你预期的结果吗？检查它并尽快告诉我
回答by Rachael
set the max-width of your image using the percent, rather than pixel, rem, em, etc.
使用百分比设置图像的最大宽度，而不是像素、rem、em 等。
.resizable-img {
max-width: 100%;
}
回答by rerich
if you don't need responsive or fluid design(mentioned in other answers), final solution is to set minimum width for body.
如果您不需要响应式或流畅的设计（在其他答案中提到），最终的解决方案是设置 body 的最小宽度。
set min-width on body to the most wide element width(in most cases - .container) and remove width and min-width form html element.
将 body 上的 min-width 设置为最宽的元素宽度（在大多数情况下 - .container）并删除 width 和 min-width 表单 html 元素。
body {
width:100%;
min-width:980px;
}
you must expect that you will lose customers when your design is non-responsive
当你的设计没有响应时，你必须预料到你会失去客户
回答by John McNulty
Have you included a CSS reset in your page?
您是否在页面中包含了 CSS 重置？
