网页背景100%平铺浏览器缩小背景显示不全

最新推荐文章于 2022-07-05 17:11:39 发布

cen备忘录

最新推荐文章于 2022-07-05 17:11:39 发布

阅读量1.4k

点赞数

文章标签：背景显示不全

<!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; 这个宽度取于你的网页最低宽度。

以上也是我做项目碰到过的问题，不过依上述方法我已经解决了。希望对大家有帮助。

心得：

还有一点说明,在外层也套一个div 设置为：.tipBdr{width:100%;min-width:990px;background:#fff}

里层的div 设置为：#tip{width:990px;height:17px;margin:0 auto;padding-top:4px;background:#fff}

无论怎么改变分辨率和调整窗口大小,内层的 div 始终是990px,而外层的背景始终会平铺。

原文:http://www.mini88s.com/news_list.asp?id=1305