html、正文和 div 设置为 100% 宽度，但它仍然没有占用全部 100%
[英]html, body, and div set at 100% width but it's still not taking the full 100%
问题描述
I reset the margins and padding to 0 .
我将边距和填充重置为0 。 I set the <html> , <body> width to 100%.我将<html>和<body>宽度设置为 100%。
My CSS looks something like this:我的 CSS 看起来像这样：
html, body {
margin:0;
padding:0;
width:100%;
}
#wrapper {
margin:0;
padding:0;
width:100%;
background-color:#ccc;
}
Whenever I resize the browser to the point I get a horizontal scroll bar the div doesn't take the full 100% width.每当我将浏览器调整到水平滚动条的位置时，div 不会占据完整的 100% 宽度。 Not even the body or html.甚至没有正文或 html。 I have firebugged it and there's about a 180px gap.我已经对其进行了 firebugged，并且有大约 180px 的差距。
3 个解决方案
解决方案1
12 2018-05-25 06:52:34
You can use overflow for that您可以为此使用溢出
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}
I also faced similar issue and i used this我也遇到过类似的问题，我用过这个
解决方案2
2 2020-06-09 13:22:29
Short answer:简短回答：
- Your browser shortcut (Chrome =
Ctrl + Shift + I, Firefox =Ctrl + Shift + C)您的浏览器快捷方式（Chrome = Ctrl + Shift + I，Firefox =Ctrl + Shift + C） - Put your mouse over the gap and follow it all the way down to find the element causing the problem将鼠标放在间隙上并一直向下移动以找到导致问题的元素
- Fix it修理它
Longer answer:更长的答案：
As Dan Kanze said, if there is a consistent gap then that means some element(s) inside of your wrapper is causing an offset.正如 Dan Kanze 所说，如果存在一致的间隙，则意味着包装器内部的某些元素导致了偏移。
To help you further, I suggest you to use one nice devtools that you can find on both Chrome Chrome devtools screenshot & FF FF devtools screenshot .为了进一步帮助您，我建议您使用一个不错的开发工具，您可以在 Chrome Chrome devtools screenshot和 FF FF devtools screenshot上找到它。
Shortcuts: Chrome = Ctrl + Shift + I Firefox = Ctrl + Shift + C快捷键：Chrome = Ctrl + Shift + I Firefox = Ctrl + Shift + C
Once you're using this, you just have to put your cursor pointer over the gap, and just hover it all over the vertical gap until it finds something, then click and you'll find the bad html guy !一旦你使用了它，你只需要将光标指针放在间隙上，然后将它悬停在垂直间隙上直到它找到东西，然后单击你就会找到坏的 html 家伙！
解决方案3
1 2012-08-03 19:03:11
If there is a consistent 180px gap then that means elements inside of your wrapper are causing an offset.如果始终存在 180 像素的间隙，则表示包装器内部的元素导致了偏移。
Your container elements look fine.您的容器元素看起来不错。
To find the culprite FF has a great debug tool for exactly this called 3D mode.为了找到罪魁祸首，FF 有一个非常棒的调试工具，它就是 3D 模式。 This will show you outlier from your main container where you can select and find the element in your code.这将向您显示主容器中的异常值，您可以在其中选择和查找代码中的元素。
With a link I can help you further.通过链接，我可以进一步帮助您。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.