当前位置：首页 → 问答吧 → 重新整理了提问，自适应高度DIV的上面有固定高度的DIV，整体高度超过100%，怎么办

重新整理了提问，自适应高度DIV的上面有固定高度的DIV，整体高度超过100%，怎么办

时间：2010-05-13

来源：互联网

各位！各位！之前的提问，可能我没有描述太清楚，现在重新发代码，望各位热心帮忙，谢谢

请问
能不能让container始终保持高度100%，不出现滚动条
而让left、right在内容增加时自动出现滚动条，但滚动条又必须在屏幕可见的范围内

所有的内容都能自适应分辨率

<!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"> html,body{ height:100%;margin:0px;} body{margin:0px; padding:0px;} .container{height:100%; width:100%; background-color:yellow; } .top{ width:100%; height:54px; background-color:#999999; } .left{width:200px;height:100%; position:absolute; top:54px;left:0; background-color:blue;overflow-y:auto;overflow-x:auto;overflow:hidden;} .right{height:100%;background-color:aqua; margin-left:200px; overflow-y:auto;overflow-x:auto; overflow:hidden;} .page{width:1000px;height:800px; background-color:#FFFFFF;} </style> </head> <body> <div class="container" > <div class="top">标题标题</div> <div class="left"> <p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p> <p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p> <p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p><p>blue</p> </div> <div class="right"> <div class="page">aqua</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 ywzywztsz 于 2010-5-14 17:47 编辑 ]

作者: ywzywztsz 发布时间: 2010-05-13

没有说清- - 请给出实例代码- -。。。

作者: cwq2jxl 发布时间: 2010-05-13

只想让2不占高度的话,
2
position:absolute

作者: 4321285 发布时间: 2010-05-13

再重新帮我看看吧，拜托了

作者: ywzywztsz 发布时间: 2010-05-13

.top {position:absolute}
.left,.right{margin-top:54px;}试试

<!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"> html,body{ height:100%;margin:0px;} body{margin:0px; padding:0px;} .container{height:100%; width:100%; background-color:yellow; position:relative;} .top{ width:100%; height:54px; background-color:#999999; clear:both;position:absolute;top:0;left:0;z-index:99;} .left{width:200px;height:100%; position:absolute;left:0; background-color:blue; clear:both;} .right{height:100%;background-color:aqua; margin-left:200px; clear:both;} </style> </head> <body> <div class="container" > <div class="top">标题标题</div> <div class="left">blue</div> <div class="right">aqua</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 4321285 于 2010-5-13 17:34 编辑 ]

作者: 4321285 发布时间: 2010-05-13

楼主哥哥，弄个例子也不能弄个class="1" ,"2","3"啊，一不小心就误导了别的朋友去试了，结果发现css不起作用了吧！

看下我发的代码够你使不。

作者: 47tz 发布时间: 2010-05-13

再来一个

作者: 47tz 发布时间: 2010-05-13

饭饭的就挺好的~建议用饭饭的那个~~

作者: xiaotian_s 发布时间: 2010-05-13

谢谢各位的热心帮助

只是我没说清楚，光这样也不够，如果left这里是竖形菜单，菜单又比较多，一屏放不下，要出现滚动条呢？

能不能让container始终保持高度100%
而让left、right在内容增加时自动出现滚动条，但滚动条又必须在屏幕可见的范围内

所有的内容都能自适应分辨率

作者: ywzywztsz 发布时间: 2010-05-14

.left,.right{margin-top:54px;}

如果这样，那么当left、right出现滚动条时，滚动条的上半部就会看不见了，被top盖住

作者: ywzywztsz 发布时间: 2010-05-14