收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 11513|回复: 21

[讨论] Css div 100%宽度 问题

[复制链接]
发表于 2008-5-20 00:21:05 | 显示全部楼层 |阅读模式
我有个 div  用 css 控制宽度为 100%

然后 div 背景放了一张图

浏览器打开的时候没问题

最大化看也没问题

如果不是最大化看的时候,拖拽下边的滚动条,可以看见那个div会少一块背景图片的显示。

当然再最大化一下浏览器就会好,但是我想知道有没有解决的办法

可能有的朋友 会建议我把div的宽度定义成像素 1024分辨率下 定义1000左右的时候,不是超出去 就是漏个缝,

所以我想问 能不能用 100%的宽度 还不出现拖拽 背景图片空白的问题

我记得以前好像有人解决过这问题,但是很久以前的事情了,我忘了再哪看见的了~~

希望高手赐教,谢谢!
发表于 2008-5-20 05:39:12 | 显示全部楼层
描写得很详细,看了还是一头雾水。可否给出代码。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-5-20 14:09:31 | 显示全部楼层
现在的这个论坛就存有这个问题,把窗口还原,不最大化显示,进行窗口显示,这个时候下边不是有个滚动条么,向右拖拽,看这网页右侧,本来应该有内容的,现在变成了空白

我说的就是这个问题~~~试试就知道了~
回复 支持 反对

使用道具 举报

发表于 2008-5-20 14:22:21 | 显示全部楼层
帮你顶一下。我也想知道这个问题的解决方法
回复 支持 反对

使用道具 举报

发表于 2008-5-20 17:40:06 | 显示全部楼层
搞个背景平铺撒
回复 支持 反对

使用道具 举报

发表于 2008-5-20 17:43:52 | 显示全部楼层
这个是你的宽度设置问题!!因为你这个100%是根据浏览器的宽度设定的,没有根据你的内容!
微软也有这个问题!! FF下可以用 min-width 解决!
IE6.0也有特别方法解决!!
回复 支持 反对

使用道具 举报

发表于 2008-5-20 17:43:56 | 显示全部楼层
这个问题好象是解决不了的吧,你看过左边吗?左边已经完全靠边了.
回复 支持 反对

使用道具 举报

发表于 2008-5-20 17:52:00 | 显示全部楼层
原帖由 [i]zhaoliancheng 于 2008-5-20 17:40 发表
搞个背景平铺撒


楼主说了,背景是一张图,所以平铺并不适合。

我理解的是可能因为body与html的概念。
html是整个浏览窗口,而body是网页的内容,该DIV放在body里,并定义为100%,这个100%指的是div的宽度,但div的宽度会根据内容作出调整,所以尝试下将背景定义在body里应能解决,反正是100%对吗。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-5-20 17:53:55 | 显示全部楼层
直接定义尺寸 感觉不如100%智能  但是100%又有这个问题~~好像不好解决~~~
但是应该有解决的办法

http://www.52hxw.com/
这个网站首页上边的那个条 就没问题
看着像用的100%宽 不知道是不是
如果是直接定义的像素 那就是我猜错了

不过现在大部分这样的网站 都会有这问题
如果有碰到解决这个问题的网站,大家拆拆代码,看看怎么解决的..
回复 支持 反对

使用道具 举报

发表于 2008-5-20 19:01:13 | 显示全部楼层
这个网站首页上边的那个条 就没问题
-----------那是用5楼平铺的方法。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-5-20 21:05:29 | 显示全部楼层
原帖由 [i]zzguo28 于 2008-5-20 19:01 发表
这个网站首页上边的那个条 就没问题
-----------那是用5楼平铺的方法。


背景平铺不是也要铺到div的窗口里吗~~如果窗口变了 里面的背景也会变吧

设置100% 好像就是控制这个div 里面背景应该也会受控制的~~

你能教我怎么弄吗?
回复 支持 反对

使用道具 举报

发表于 2008-5-21 00:36:54 | 显示全部楼层
------
css
.header{width:100%;height:?px;background:url(../images/headbg.jpg) top repeat-x;}
------
htm
<div class="header"></div>
回复 支持 反对

使用道具 举报

发表于 2008-5-21 01:02:27 | 显示全部楼层
用层的裁切方式呗
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-5-21 13:58:49 | 显示全部楼层
原帖由 [i]zzguo28 于 2008-5-21 00:36 发表
------
css
.header{width:100%;height:?px;background:url(../images/headbg.jpg) top repeat-x;}
------
htm


这个好像还是不行~~~~~~~~~~~~~~~~~~我试了一下 代码如下......

运行下试试~~

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 Stoneworks 于 2008-5-21 14:00 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-5-21 14:37:28 | 显示全部楼层
.aaa{width:100%;height:100px;background:#818181;}

不过,如果页面里有图片或定义了绝对宽度的层,缩小窗口肯定是要被撑出滚动条的~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-5-21 15:55:26 | 显示全部楼层
撑出滚动条没事~~最主要是往右边拖拽~~上边的背景图 就变空白了~~
回复 支持 反对

使用道具 举报

发表于 2008-5-21 18:45:13 | 显示全部楼层
把背景图放再body里面试下 这方法得行
回复 支持 反对

使用道具 举报

发表于 2008-5-21 18:46:33 | 显示全部楼层
body{width:100%;background: url() top repeat-x;}
.aaa{width:1000px;height:100px;background:#818181;margin-top:100px}
回复 支持 反对

使用道具 举报

发表于 2008-5-21 21:13:14 | 显示全部楼层
= =!!!
这个问题用div CSS解决,是很麻烦的 也不直观,更不语义!

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-10-16 15:05:41 | 显示全部楼层

这个问题没有人能解决吗?

我也遇到此类问题,请问有何解决方法
回复 支持 反对

使用道具 举报

发表于 2016-8-23 16:35:12 | 显示全部楼层
刚刚我这边也出现类似的问题。
出现横向滚动条是因为引用图片的时候是在HTML里面引用的,如果删掉HTML里引用的路径,直接在CSS里面加设置
background-mage:url(../img03.jpg);
    background-repeat:no-repeat;
之后刷新页面试试滚动条消失了。
回复 支持 反对

使用道具 举报

发表于 2016-8-23 16:39:34 | 显示全部楼层
vvchuanqi 发表于 2009-10-16 15:05
我也遇到此类问题,请问有何解决方法

刚刚我这边也出现类似的问题。
出现横向滚动条是因为引用图片的时候是在HTML里面引用的,如果删掉HTML里引用的路径,直接在CSS里面加设置
background-mage:url(../img03.jpg);
    background-repeat:no-repeat;
之后刷新页面试试滚动条消失了。
你试试这个办法,看能不能弄好。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-13 06:19 , Processed in 0.102280 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表