ryanleo
小狐狸
小狐狸
  • UID5880
  • 注册日期2005-05-11
  • 最后登录2008-10-01
  • 发帖数5
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:4162回复:6

关于firefox下的背景自适应高度的问题

楼主#
更多 发布于:2005-08-25 10:35
首先是div的嵌套
<div id="1">
        <div id="2"></div>
        <div id="3"></div>
</div>
其中1,2,3的height全部设置为auto,为什么当2 3内容增加的时候,1的背景不会自动增加,不是自适应高度。
CSS
#1 {
margin:auto;
background-image: url(BG_body.gif);
background-repeat: repeat-y;
height: auto;
width: 778px;
}
#2 {
float: left;
width: 555px;
margin:10 0 0 5px;
text-align: left;
padding-left: 10px;
}
#3 {
float: right;
width: 205px;
text-align: left;
margin-right: 4px;
}
A man never too old to learn
gzpbx
狐狸大王
狐狸大王
  • UID1527
  • 注册日期2004-12-29
  • 最后登录2009-06-30
  • 发帖数410
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2005-08-25 10:35
把css写上呀~
如果你爱上了一朵生长在一颗星星上的花,那么夜间你看着天空就感到甜蜜愉快。所有的星星上都好象开着花。
williamfan
小狐狸
小狐狸
  • UID8212
  • 注册日期2005-08-25
  • 最后登录2005-08-25
  • 发帖数1
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
2楼#
发布于:2005-08-25 10:35
这个问题也正是我想问的,在IE下这么操作出来的网页是可以自适应大小的,但是用,Firefox就不行了,firefox的兼容性也太差了吧?
gzpbx
狐狸大王
狐狸大王
  • UID1527
  • 注册日期2004-12-29
  • 最后登录2009-06-30
  • 发帖数410
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2005-08-25 10:35
说到“兼容性”这个问题就不好说了。
反正IE下正常,Firefox下看起来差不多,做到这样就可以了!
如果你爱上了一朵生长在一颗星星上的花,那么夜间你看着天空就感到甜蜜愉快。所有的星星上都好象开着花。
thedawn
小狐狸
小狐狸
  • UID4377
  • 注册日期2005-03-25
  • 最后登录2006-06-26
  • 发帖数22
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2005-08-25 10:35
首先 id 是不能以数字开头的, 纯数字更不可以.
另外贰, 叁两个 div 使用了浮动, 壹号 div 的高度实际为0, 所以看不到背景.
Minisheep
小狐狸
小狐狸
  • UID2333
  • 注册日期2005-01-19
  • 最后登录2006-10-23
  • 发帖数80
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
5楼#
发布于:2005-08-25 10:35
<div id="1">
<div id="2"></div>
<div id="3"></div>
</div>
<div style="clear:both"></div>
KavenYan
小狐狸
小狐狸
  • UID7238
  • 注册日期2005-07-11
  • 最后登录2006-01-12
  • 发帖数19
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2005-08-25 10:35
对于背景不能自动延伸的原因上面说的很清楚,解决方法是多嵌套一个层,这个层设置浮动,并承担背景,就ok了。
下面就简单示意一下
<div style="margin:0 auto">
<div style="float:left;backgourd:#fff url(img.gif)">
    <div style="float:left"></div>
    <div style="float:right"></div>
</div>
</div>
送人玫瑰之手,历久犹有余香。
游客

返回顶部