当css属性width设为100%时
当css属性width设为100%时
^_^肥仔John
发布于 2018-01-18 11:03:18
发布于 2018-01-18 11:03:18
平常在写页面html代码时，经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body，而且没有明确设置body的宽度，那么就会出现以下的情况了。
代码：
1 <body>
2 <div style="background:#888;width:100%;height:200px">
3 <div style="width:1000px;height:100px;margin:0 auto;border:solid 1px red"></div>
4 </div>
5 </body>浏览器最大化时：
浏览器宽度调到出现水平滚动条时：
使用水平滚动条，浏览右边部分时：
结果右边没有灰色背景。
分析：在没有明确设定body的宽度时，body的宽度就是浏览器可显示区域的宽度，上面的例子中可显示区域的宽度明显小于1000px，也就是说body的宽度远远小于1000px。所以body下的控件宽度被设为100%时，也只能是等于或小于浏览器可显示的宽度。
解决方法：
1.body设定明确的宽度。
2.如果body不能设定明确的宽度。如主内容居中，两边留白处宽度自动，可以在主内容的中设定相同的背景。（注意：对于有边框的情况，因主内容的父控件已经设定背景和边框，而主内容也需要设定背景和边框，那么它们重叠的地方会出现边框加粗的情况，这时把有边框的图片作为背景就能达到所要的效果）。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2011-11-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读