请教div左右两列自适应屏幕布局的问题。
主要就是希望A和B两个div在内部控件高度不超过屏幕高度的时候，高度就是屏幕的高度，当内部控件的高度高于屏幕高度的时候，A，B的高度会自动延伸。在网上找了一段java的代...
主要就是希望A和B两个div在内部控件高度不超过屏幕高度的时候，高度就是屏幕的高度，当内部控件的高度高于屏幕高度的时候，A，B的高度会自动延伸。
在网上找了一段java的代码也看不懂，修改了一下，IE8下勉强能符合要求，但是到了谷歌或者firefox浏览器里就显示不到底部了。。。请多指教，谢谢！。下面贴出代码。
**************************************************
先上截图：
**********************************************************************************************
再上代码：test.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" style=" overflow:hidden;"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css">*{margin:0px;padding:0px;} .header { width: 100%; background: #567; height: 100px; }
#col1{ float: left; width: 80px; background: #DDD; margin-right: 10px; word-wrap:break-word; font-size:12px; border:1px solid red; overflow:auto; } #col2 { margin-left:83px !important; margin-left:82px;background:#c1dce9; border:1px solid yellow; overflow:auto; } #foot{height:100px; background-color:#ccc;clear:both;} #middle{ zoom:1;} </style></head><body>
<div class="header" id="XX">header</div><div id="middle"> <div id="col1">A</div> <div id="col2">B</div></div><script type="text/javascript"> total = document.documentElement.clientHeight; colHeight = total - 100 - document.getElementById("col1").offsetTop; document.getElementById("col1").style.height = colHeight + "px"; document.getElementById("col2").style.height = colHeight + "px";</script></body></html> 展开
在网上找了一段java的代码也看不懂，修改了一下，IE8下勉强能符合要求，但是到了谷歌或者firefox浏览器里就显示不到底部了。。。请多指教，谢谢！。下面贴出代码。
**************************************************
先上截图：
**********************************************************************************************
再上代码：test.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" style=" overflow:hidden;"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css">*{margin:0px;padding:0px;} .header { width: 100%; background: #567; height: 100px; }
#col1{ float: left; width: 80px; background: #DDD; margin-right: 10px; word-wrap:break-word; font-size:12px; border:1px solid red; overflow:auto; } #col2 { margin-left:83px !important; margin-left:82px;background:#c1dce9; border:1px solid yellow; overflow:auto; } #foot{height:100px; background-color:#ccc;clear:both;} #middle{ zoom:1;} </style></head><body>
<div class="header" id="XX">header</div><div id="middle"> <div id="col1">A</div> <div id="col2">B</div></div><script type="text/javascript"> total = document.documentElement.clientHeight; colHeight = total - 100 - document.getElementById("col1").offsetTop; document.getElementById("col1").style.height = colHeight + "px"; document.getElementById("col2").style.height = colHeight + "px";</script></body></html> 展开
1个回答
展开全部
真的不知道你想要实现什么效果，有必要说的那么复杂，弄得那么复杂（原谅我才疏学浅）？
height你可以给很多值，固定的px、100%的高度、自动高度auto。
还有你加的那段代码叫javascript脚本，不是java！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
