Html 100% 宽度的 Css 问题仅在移动 safari 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6695676/
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
100% width Css issue only on mobile safari
提问by george
Here is the site in question: www.prestigedesigns.com
这是有问题的网站：www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
问题是我的页眉和页脚不会拉伸到它们指定的 100%，而只能在 iPhone/iPad 上。
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
我已经尝试了我认为的一切，我真的可以使用一些帮助吗？有没有其他人有类似的问题？
Thanks.
谢谢。
回答by Walter Cameron
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
这是移动 Safari 的视口问题，但您可以通过缩小桌面浏览器窗口的宽度并向右滚动来获得相同的效果，您会看到背景开始消失。
This is because when you're setting width:100%to your #topand #headerdivs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
这是因为当你设置width:100%你#top和#headerdiv的，你告诉他们调整到包含元素，在这种情况下是浏览器窗口，（或视口）的宽度。你不是告诉他们调整里面的内容。
Mobile Safari's default viewport width is 980px, so it uses 980pxas the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
Mobile Safari 的默认视口宽度是980px，因此它980px用作 div 的包含元素的宽度。这就是为什么您的布局（大约 1050 像素）的背景被切掉的原因。
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
您可以通过直接设置其视口（阅读Apple 的文档）或通过min-width:以像素为单位添加设计宽度来为移动 Safari 修复此问题；到您的body. Mobile Safari 将使用min-width的值来设置它的视口，并且它也将阻止它在桌面浏览器中发生。
回答by helpyou
Set the viewport to adapt your page on any device.
设置视口以在任何设备上调整您的页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
回答by Shalmal Sheth
Set min-width:(Width of your design)px;in CSS file and this issue will be solved.
min-width:(Width of your design)px;在 CSS 文件中设置，此问题将得到解决。
回答by David Nguyen
it's not assigned width: 100%the header is getting width: 1009px;same thing with the footer.
它没有分配width: 100%页眉width: 1009px;与页脚变得相同。
回答by allanmayberry88
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?
只是一种预感，因为我实际上无法对其进行测试，但是您在footbar 中的foot 元素设置为以像素为单位的绝对宽度，而footbar 设置为% - 与您的标题元素相同- 也尝试将它们切换为%？
