Question

我正在开发一个网页，我注意到了这个问题。

body full width issue print screen 请发布您想到的任何内容，这将非常有帮助！

查看网站here

编辑：添加了网站链接

Answer 1

您需要使用CSS reset：

使用此代码：

body, html{
    margin:0;
    padding:0;
}

默认情况下，所有元素都有一些样式需要重置它们。

Answer 2

Ähm，您的div.container的宽度为970px。这会打破你的身体宽度，因为你的布局不流畅。使用媒体查询或渐进宽度将有很大帮助。

Answer 3

可能想检查一下是否可行，对于我的特定问题确实如此。

body {
    min-width: fit-content;
}

将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;
}

Answer 4

可能缺少一些clear:both; ..

Up：可能不是这样，但也许其他子元素会阻止宽度，并且不允许页面占用其总宽度。如果你有任何浮动应该考虑在页脚之前清楚（因为我看到右边的div）。

查看你的html / css代码会更好：）

Answer 5

试试这个

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

Answer 6

是你的预期结果吗？检查一下，尽快告诉我 {{0P>

Answer 7

尽管这是一个非常古老的问题，但我个人曾两次遇到此线程而无法解决此问题（我一直忘记我做了什么来修复它）。对于未来的观众（包括我在内），如果将 padding 和 margin 设置为 0 并不能神奇地解决您的问题，请尝试在正文中使用“位置：固定”。

body {
  position: fixed;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  width: 100%;
}

Answer 8

您是否在页面中添加了CSS重置？

http://meyerweb.com/eric/tools/css/reset/

Answer 9

使用百分比设置图像的最大宽度，而不是像素，rem，em等。

.resizable-img {
    max-width: 100%;
 }

Answer 10

如果您不需要响应或流体设计（在其他答案中提到），最终解决方案是设置身体的最小宽度。

将body上的min-width设置为最宽的元素宽度（在大多数情况下为.container），并从html元素中删除width和min-width。

body {
    width:100%;        
    min-width:980px;
}

当您的设计无响应时，您必定会失去客户

Answer 11

好，这对我有用：

    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

我在100％的部分上的填充是在页面宽度上添加填充，从而得到100％+（填充值* 2）

Answer 12

只有在调整浏览器窗口大小时，问题才会持续存在。由于它没有破坏网站，你可以留下这个问题。

或

如果您要创建无响应的网站，只需向html和正文添加特定宽度即可。像这样的东西

html, body {
  width:1170px;
}

CSS正文宽度不会达到100％

12 个答案: