前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。
第一种方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> #wrap{ display: table; width: 100%; } #wrap>div{ display: table-cell; height: 800px; } #sidebar{ width: 200px; background: red; } #contend{ background: blue; } </style> </head> <body> <div id="wrap"> <div id="sidebar"></div> <div id="contend"></div> </div> </body> <script> </script> </html>
这种布局主要技术就是让div转变成table元素，让div标签拥有table，td标签的特点。
第二种方法
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--<link rel="stylesheet" href="test.css" type="text/css">--> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style rel="stylesheet" type="text/css"> html,body{ padding: 0px; margin: 0px; } .one { float: left; height: 100px; width: 300px; background-color: blue; } .two { overflow: hidden; height: 200px; background-color: red; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> <script> setTimeout(function () { $('.one').animate({0},500) },500) </script> </html>
这种布局左侧固定栏浮动，右侧div标签设置overflow:hidden | auto；div就不会伸到左侧固定栏的下面，碰到浮动元素就会停止。因为出发了div.normalDiv的BFC特性，具体不是很了解，有兴趣的可以自行百度。这样貌似嵌套一个父级div还不用清浮动......（没有测浏览器兼容问题）
第三种方法：
以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。