巧用CSS来控制div自适应浏览器的高度
巧用CSS来控制div自适应浏览器的高度
发布时间:2015-05-12 来源:查字典编辑
摘要:有些朋友在用css+div做站的时候,经常会碰到这样一个问题,某个框架在不同的浏览器下会变形或者位置错乱,这该怎么办呢?其实方法很简单,用以...

有些朋友在用css+div做站的时候,经常会碰到这样一个问题,某个框架在不同的浏览器下会变形或者位置错乱,这该怎么办呢?其实方法很简单,用以下代码就可以解决了:

<html>
 <head>
 <style>
 #myTable{height:100%;border:solid 1px red;width:100%;}
 #top{margin-top:1px;height:100px;border:solid 1px green}
 #down{margin-top:1px;height:89%;border:solid 1px silver}
 #left{height:100%;border:solid 1px black;margin:1px;width:200px;float:left;}
 #right{border:solid 1px #0aa;margin:1px;height:100%;width:240px;overflow:scroll;
 }
 </style>
 </head>
 <body>
 <table id='myTable'>
 <tr><td>
 <div id='top'></div>
 <div id='down'>
 <div id='left'></div>
 <div id='right'>
 这里是内容
 这里是内容容这里是内容
 这里是内容
 这里是内容
 这里是内容
 这里是内容
 这里是内容这里是内容
 这里这里是内容
 
 这里是内容
 这里是内容
 这里是内容
 
 这里是内容
 这里是内容
 这里是内容
 这里是双线空间是内容
 这里这里是内容
 
 这里是内容
 这里是内容
 这里是内容
 
 这里是内容
 这里是内容这里是内容
 
 这里是内容
 
 这里是内容
 这里是内容这里是内容
 这里这里是内容
 
 这里是内容
 这里是内容
 这里是内容
 这里是内容
 这里是内容容这里是内容
 这里是内容
 这里是内容这里是内容
 这里这里是内容
 
 这里是内容
 这里是内容
 这里是内容
 这里是内容
 这里是内容容这里是内容
 </div>
 </div>
 </td>
 </tr></table>
 </body>
 </html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类