[英]CSS body width does not fill 100 percent
可能想检查这是否可行,它确实针对我的特定问题。
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;
}
啊,你的 div.container 有 970px 的宽度。 这打破了你的身体宽度,因为你的布局不流畅。 使用媒体查询或 procentual 宽度会有很大帮助。
也许有些clear:both;
那些不见了。。
Up : 可能不是这样,但可能其他子元素块宽度并且不允许页面占用其总宽度。 如果你有任何浮动应该考虑在页脚之前做一个明确的(因为我在右边看到了一个 div)。
看看你的 html/css 代码会更好:)
试试这个
body
{
margin:0px;
padding:0px;
width:100%;
}
尽管这是一个非常古老的问题,但我个人曾两次遇到此线程而无法解决此问题(我一直忘记我做了什么来修复它)。 对于未来的观众(包括我在内),将 padding 和 margin 设置为 0 并不能神奇地解决您的问题,请尝试在正文中使用“位置:固定”。
body {
position: fixed;
overflow-y: scroll;
padding: 0;
margin: 0;
width: 100%;
}
使用百分比设置图像的最大宽度,而不是像素、rem、em 等。
.resizable-img {
max-width: 100%;
}
好的,这对我有用:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
我对 100% 部分的填充是将填充添加到页面宽度导致宽度 100% +(填充值 * 2)
您是否在页面中包含了 CSS 重置?
这是你预期的结果吗? 检查它并尽快告诉我
如果您不需要响应式或流畅的设计(在其他答案中提到),最终的解决方案是设置 body 的最小宽度。
将 body 上的 min-width 设置为最宽的元素宽度(在大多数情况下 - .container)并删除 width 和 min-width 表单 html 元素。
body {
width:100%;
min-width:980px;
}
当你的设计没有响应时,你必须预料到你会失去客户
仅当您调整浏览器窗口大小时,问题才会存在。 由于它不会破坏网站,因此您可以保留该问题。
或
如果您正在创建一个无响应的站点,您可以简单地通过向 html 和 body 添加特定宽度来做到这一点。 像这样的东西
html, body {
width:1170px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.