问个技术性的问题，不知道有没有高手在^_^

TeamWei · 发表于 2008-6-9 23:50:56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
*{margin:0; padding:0; border:0;}
body{background-color: #666;margin: 0px; text-align:center;}
html,body{height:100%;}
.clear{clear:both; height:0; overflow:hidden;}
.webrim{float:left; width:10px; height:100%; background:#FFFFFF}
.divstyle{width:942px; height:1200px;
background:#99CC00; margin:0px 8px 0px 8px;}
</style>
</head>
<body>
<div style="width:980px; height:100%; margin: auto;">
<div class="webrim"> </div>
<div style="float:left; width:960px; height:100%; background:#000;">
<div class="divstyle">中间内容</div>
</div>
<div class="webrim"> </div>
<div class="clear"></div>
</div>
</body>

以上代码运行时如果高度不超过浏览的高度就没问题，但是超过的话（就是浏览器右边出现滚动条），最外层的div和里面左右2个div的高度就不会和中间的一样了，在火狐浏览器下会被截断，下面都是空的，如何解决最外层的div和左右2个div的高度随中间div的高度的增加而相应的增加？大概就是等于中间div的高度（白色、黑色、绿色的高度相等），并且要兼容火狐浏览器。

说明一下：上面给出的代码是会超过浏览器的高度（会出现滚动条），最外层的div和里面左右2个div高度的值不是固定的，必需是100%。

解决的话将赠送200个柠檬作为奖励，期待高手的出现:lol

victorstrife · 发表于 2008-6-10 00:08:43

问个问题...为什么你把两个div的白块这么分布...必须全部用div么...

TeamWei · 发表于 2008-6-10 00:12:05

是用div的，如果是table就没这问题了，我也知道用其它方法可以解决，不过按照要求布局是要这么写的

victorstrife · 发表于 2008-6-10 03:00:24

主要改了两处...问题只能解决一半,在下水平有限,实在想不出其它方法了...假如不准使用JS的话请54下面的代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
*{margin:0; padding:0; border:0;}
body{background-color: #666;margin: 0px; text-align:center;}
html,body{height:100%;}
.clear{clear:both; height:0; overflow:hidden;}
.webrim{float:left; width:10px; background:#FFFFFF}
.divstyle{width:942px; height:1200px;
background:#99CC00; margin:0px 8px 0px 8px;}
</style>
</head>
<body>
<div style="width:980px; height:100%; margin: auto;">
<div style="height:100%" class="webrim"> </div>
<div style="float:left; width:960px; background:#000;">
<div id="content" class="divstyle">中间内容</div>
</div>
<script language="javascript">
var h=document.getElementById("content").offsetHeight;
document.write("<div style='height:"+h+"px'; class='webrim'> </div>");
</script>
<div class="clear"></div>
</div>
</body>

复制代码

virgo · 发表于 2008-6-10 03:40:39

:call:
LZ肯定不乖，大晚上的就发这种帖子，刚准备睡觉的。。。。。
为什么一定要用DIV做呢？我晕。。。。DIV这东西还不素很擅长的说~

个人分析：
我以为还是DIV容器嵌套的问题，一般偶个人理解为，通过子容器的属性改变，来间接影响到父容器的属性变化。比如“中间内容”拉伸后，会间接影响到它的父容器，所以，才看到背后的黑色会随着“中间内容”一起延伸。但两边“白条”的容器则与其属于父级级别的容器，也就是叔叔辈~~ - -！汗~~~~所以“中间内容”容器的变化并没有直接对“白条”容器产生影响。白条容器的“位置”“大小”都没有发生变化。其中HEIGHT属性虽然设定为100%，但也不过是规定了浏览器可见范围内的100%大小，只能随着浏览器大小而变动，更关键的是位置也无变化。既然容器的位置大小并没有发生变化，那么其背景颜色也就不会变化了。呃~~有点不知道自己说什么了。。。 = =~~有错别见怪。

个人以为可以在这里修改：
.webrim{float:left; width:10px; height:100%; background:#FFFFFF; padding-bottom:10000px; margin-bottom:-10000px}
PX就是一个很大的死数据，这方法还是看了半天资料才得到的。虽然办法感觉很傻，但是我觉得非常的简单实用。

另外如果非要用DIV嵌套，不知道是否可以连环？？
因为我发现两边都是白的，中间是黑的，而最中间是绿的，我认为如果使用三层嵌套，会更容易些，最外层建立一个大的白层，上面建一个略小的黑层，最后上面建一个更小的绿层。然后通过子级的绿层，来连环影响父层。。。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
*{margin:0; padding:0; border:0;}
body{background-color: #666;margin: 0px; text-align:center;}
html,body{height:100%;}
.clear{clear:both; height:0; overflow:hidden;}
.webrim{height:100%; background:#FFFFFF;}
.divstyle{width:942px; height:1200px;
background:#99CC00; margin:0px 8px 0px 8px;}
</style>
</head>
<body>
<div style="width:980px; height:100%;" class="webrim">
<div style="width:960px; height:100%; background:#000;">
<div class="divstyle">中间内容</div>
</div>
<div class="clear"></div>
</div>
</body>
IE中测试可行，但其他浏览器不清楚；浏览器多也不素好事情，考虑的东西也要增加，我不能确定这种方法在任何浏览器上可行
另外大V的那个做法，可以在头部声明方法，然后直接调用即可。
不过LZ的要求貌似必须是用DIV~:hug:
老实说，偶一点都不觉得这种延伸背景的方法好，太麻烦了。

TeamWei · 发表于 2008-6-10 09:24:15

victorstrife的方法不行，怎么就只有一半啊:L ，而且也不太喜欢用js...
virgo的方法在ie下可以正常显示，火狐就不能了，而且这也不是我要的效果，不能用三层嵌套，需要按照我给出的这种布局方式...:hug:

.webrim{float:left; width:10px; height:100%; background:#FFFFFF; padding-bottom:10000px; margin-bottom:-10000px}
这种方法在ie还是可行的，但在火狐高度就会被拉的很长了...而且这样如果当高度超过padding-bottom和margin-bottom的值时还是不能解决

victorstrife · 发表于 2008-6-10 13:29:09

原帖由 TeamWei 于 2008-6-10 09:24 发表
victorstrife的方法不行，怎么就只有一半啊:L ，而且也不太喜欢用js...
virgo的方法在ie下可以正常显示，火狐就不能了，而且这也不是我要的效果，不能用三层嵌套，需要按照我给出的这种布局方式...:hug:

.webrim ...

布局啊布局...在完全没改动的情况下就只能这样了...在下好奇为什么你白的黑的布局不同...白的不完全可以按黑的那样做么...

virgo · 发表于 2008-6-10 13:48:22

:time:
。。。。。。汗死~~还非要用LZ的布局？？？
呃~~~~~~~~ 火狐不支持么？
如果使用大V的方法，声明调用，这个应该是很容易的说。。。。。而且拿TABLE的话，也很简单，谁出的主意非要用DIV啊？？？而且前面我也提到过，首先得要有一个子容器来变化，从而从里面“撑”开外面父容器的大小，如果一定要用LZ的布局，很明显缺少这个条件。。。。
晕啊~~头疼
我下午还要去上课，等我回来以后再研究一下吧~:L

PS：刚想了下，如果一定这样布局，而且只能使用DIV+CSS，实现的可能性不是很大，关键是没有东西“撑”开外面的两个白条容器。。。。。或许有某些属性可以做到，但目前我还没想出来。

重生の红狼 · 发表于 2008-6-10 18:21:11

对网页代码一窍不通，期待御用小秘的解答。:loveliness:

wangpeng3377 · 发表于 2008-6-10 19:06:52

提示: 作者被禁止或删除内容自动屏蔽

virgo · 发表于 2008-6-10 19:07:45

:time:
啊~~~~~~~无奈了~
如果一定要按照LZ的布局，还不允许使用其他方法。恐怕我的水平无法达到。
我实在想不出来除了用DIV嵌套来撑大容器外，还有什么办法把三个并无联系的DIV一起延伸。
曾经想过靠固定白条DIV在浏览器的位置来获得一个延伸的假象，但没有成功；
LZ不妨考虑下position定位，但遗憾的是，对IE的支持性不是很好。
或者LZ可以考虑一下其他的属性，目前我想不出来。
我还是对CSS+DIV不够深入，有些地方想不到，
期待他人再来解答吧~或者建议LZ去到CSDN等专业编程网站上去询问。

不过LZ为什么一定要用这种布局呢？虽然我认为这种布局属于单行三列式，不过在我的记忆中，旁边的两列都是固定长度。
如果改换成嵌套式布局，虽然这种嵌套不太符合规范。或加些JS代码，这问题应该不是很难。

啊啊啊啊啊啊啊啊~~算了，还素偶水平不够，希望LZ或其他人找到合适的方法，能发到这里，以供有兴趣的人学习借鉴~

慵懒悠悠 · 发表于 2008-6-10 19:47:54

仅用过基础的HTML语言的人路过~我很好奇是谁规定不让用table的......难道是老师....

TeamWei · 发表于 2008-6-10 20:52:02

布局啊布局...在完全没改动的情况下就只能这样了...在下好奇为什么你白的黑的布局不同...白的不完全可以按黑的那样做么...

其实那两条白色是不相同的，是两种不同的颜色，我只是为了方便才都改为白色，但是他们除了颜色不同，属性基本是一样的，js也是可以用的（那是在没有其它办法的情况下使用），像这种用table是很容易实现的;P ，不过我只想挑战一下div是否能够实现这种布局:loveliness:，没想到还真不容易...现在还没解决...

预览地址：test.html

virgo · 发表于 2008-6-10 23:22:10

:)
LZ果然素坏人~~~~
我就奇怪为什么简单的办法不用，唯一能联系上的嵌套也不让用；非要用这种不关联的DIV布局去做；
8过的确是很有难度的说。。。。。如果LZ有了解决方案，务必发来~~:loveliness:

账号		自动登录	找回密码
密码			立即注册

wangpeng3377 wangpeng3377 当前离线精华阅读权限 0 最后登录 1970-1-1 IP卡狗仔卡头像被屏蔽该用户从未签到	发表于 2008-6-10 19:06:52 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽

	回复支持反对使用道具举报显身卡

[求助] 问个技术性的问题，不知道有没有高手在^_^

......

......

......