html布局,左侧固定右侧自适应

前几天看到我们的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还不用清浮动......（没有测浏览器兼容问题）

第三种方法：

　　以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。

posted @ 2017-01-06 20:26  iwang5566  阅读(527)  评论(0)  编辑  收藏  举报