[英]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.