前几天看到我们的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({width:0},500)
},500)
</script>
</html>
这种布局左侧固定栏浮动，右侧div标签设置overflow:hidden | auto；div就不会伸到左侧固定栏的下面，碰到浮动元素就会停止。因为出发了div.normalDiv的BFC特性，具体不是很了解，有兴趣的可以自行百度。这样貌似嵌套一个父级div还不用清浮动......（没有测浏览器兼容问题）
第三种方法：
以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。