开启左侧

[CSS] 遇到一个不兼容的布局

[复制链接]
发表于 2012-4-13 17:27:42 | 显示全部楼层 |阅读模式
如下图想要的效果,
我有三个层,默认状态下是全屏显示,不管分辨率多大,当内容超过全屏的高度时就出现滚动条自动延伸下去,内容不够时B和C的层背景也不向上伸缩,也就是B和C的层背景始终占满全屏。




下面的布局现在问题是在IE6下不兼容,内容少时,B和C背景向上缩了,FIREFOX下却可以占全屏的。大家有没其它好的想法,建议下,谢。






附件: 你需要登录才可以下载或查看附件。没有帐号?注册
qq_login.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:27:45 | 显示全部楼层
看不兼容IE6的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">/*<![CDATA[*/* { margin:0; padding:0; }html, body { height:100%; text-align:center; font:12px/1.4 Verdana, sans-serif; }#wrapper { width:100%; min-height:100%; background:#ccc; margin:auto; text-align:left; overflow:hidden; position:relative; z-index:1; }* html #wrapper { height:100%; }#header { background:Green; height:40px; }#main { padding-bottom:52px; }#main:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }* html #main { height:1%; }*+html #main { min-height:1px; }#sidebar { float:left; width:20%; background:Gray; padding-bottom:32000px; margin-bottom:-32000px; }#content { float:right; width:80%; background:Olive; padding-bottom:32000px; margin-bottom:-32000px; }/*]]>*/</style></head><body><div id="wrapper"> <div id="header">  <h3>header</h3>  <code>  #header {   background:Green;   height:40px;   }  </code> </div> <div id="main">  <div id="sidebar">   <h3>sidebar</h3><pre>#sidebar { float:left; width:20%; background:Gray; padding-bottom:32000px; margin-bottom:-32000px;}</pre>  </div>  <div id="content">    <h3>content</h3><pre>#content { float:right; width:80%; background:Olive; padding-bottom:32000px; margin-bottom:-32000px;}</pre><pre>#content { float:right; width:80%; background:Olive; padding-bottom:32000px; margin-bottom:-32000px;}</pre>  </div> </div></div></body></html>
运行代码复制代码另存代码 提示:您可以先修改部分代码再运行
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:27:48 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:27:51 | 显示全部楼层
继续请教中。。。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:27:54 | 显示全部楼层
如果能用框架做就简单了
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表