（前端细节)背景100%平铺,浏览器缩小,背景显示不全bug

来源：互联网发布：四川广电网络怎么连接编辑：程序博客网时间：2024/06/05 08:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>背景平铺</title><style type="text/css">*{border:0; padding:0; margin:0;}.top{height:25px; background:#f3f3f3; border-bottom:1px solid #ccc; width:100%;}</style></head><body><div class="top"></div><div style="width:980px; margin:50px auto; height:200px; background:#ccc; overflow:hidden;">好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧好吧</div></body></html>

这段代码top的背景看似没问题，但当你把浏览器的窗口缩小时，拖动滚动条你会发现上面的背景少了一块。

这个bug问题存在与 width：100%；他只获取浏览器的当前100%宽度，但是没有加上滚动条的那一块长度。

解决方法：在width:100%; 后面加个 min-width：**px; 这个长度取于你的网页最低宽度。

好了希望对大家有帮助。

0 0